.root {
  pointer-events: auto;
  user-select: none;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  transition: opacity 0.2s ease;

  &:not(:first-child) {
    margin-top: 0.5rem;

    @media (max-width: 600px) {
      margin-top: 1rem;
    }
  }
}

.button {
  color: var(--color-composer-button);
  box-shadow: 0 1px 2px var(--color-default-shadow);

  @media (max-width: 600px) {
    width: 2.875rem !important;
    height: 2.875rem;
  }
}

.icon {
  font-size: 1.75rem !important;
}

.unread-count {
  pointer-events: none;

  position: absolute;
  top: -0.3125rem;
  right: -0.3125rem;

  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4375rem;
  border: 1px solid var(--color-background);
  border-radius: 0.75rem;

  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
  color: white;
  text-align: center;

  background-color: var(--color-green);

  @media (max-width: 600px) {
    top: -0.6875rem;
    right: auto;
  }
}