discourse/app/assets/stylesheets/common/base/sidebar-section-link.scss

@use "lib/viewport";

:root {
  --d-sidebar-section-link-prefix-margin-right: var(--space-2);
  --d-sidebar-section-link-prefix-width: var(--space-6);
  --d-sidebar-section-link-icon-size: 1em;
  --d-sidebar-section-link-emoji-size: 1em;
}

.sidebar-section-link-wrapper {
  display: flex;
  align-items: center;
  position: relative;

  &[data-list-item-name="all-categories"],
  &[data-list-item-name="all-tags"],
  &[data-list-item-name*="configure-default-navigation-menu-"] {
    font-size: var(--font-down-1-rem);
  }

  &.--hovering .sidebar-section-link {
    background: var(--d-sidebar-highlight-background);
    color: var(--d-sidebar-highlight-color);

    .prefix-text {
      background: var(--d-sidebar-highlight-prefix-background);
      color: var(--d-sidebar-highlight-prefix-color);
    }

    .sidebar-section-link-suffix.icon.unread svg {
      color: var(--d-sidebar-highlight-suffix-color);
    }
  }

  .sidebar-section-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    color: var(--d-sidebar-link-color);
    border-radius: var(--token-radius-normal);
    gap: var(--d-sidebar-section-link-prefix-margin-right);

    &:focus-visible,
    &:hover {
      background: var(--d-sidebar-highlight-background);
      color: var(--d-sidebar-highlight-color);
      outline: none;

      .prefix-text {
        background: var(--d-sidebar-highlight-prefix-background);
        color: var(--d-sidebar-highlight-prefix-color);
      }

      .sidebar-section-link-suffix.icon.unread svg {
        color: var(--d-sidebar-highlight-suffix-color);
      }
    }

    &--active,
    &.active,
    &.exact-url-match {
      background: var(--d-sidebar-active-background);
      color: var(--d-sidebar-active-color);
      font-weight: var(--d-sidebar-active-font-weight);

      .sidebar-section-link-prefix {
        &.icon {
          color: var(--d-sidebar-active-color);
        }
      }

      .prefix-text {
        background: var(--d-sidebar-active-prefix-background);
      }

      .sidebar-section-link-content-badge {
        color: var(--d-sidebar-active-color);
      }

      .sidebar-section-link-suffix.icon.unread svg {
        color: var(--d-sidebar-active-suffix-color);
      }
    }

    &--muted {
      &:not(.active) .sidebar-section-link-prefix {
        opacity: 0.75;
      }

      --d-sidebar-link-color: var(--token-color-text-subtlest);
    }

    .sidebar-section-link-content-badge {
      color: var(--d-sidebar-link-badge-color);
      font-size: var(--font-down-2);
      width: auto;
      min-width: var(--font-down-1);
      padding-inline: var(--space-1);
      font-weight: var(--token-font-weight-regular);
      flex-shrink: 0;
      text-align: center;
      max-width: 15ch;

      @include ellipsis;

      &:not(.icon) {
        margin-left: auto;
      }
    }

    .sidebar-section-link-suffix {
      font-size: var(--font-down-4);
      flex-shrink: 0;

      &.icon {
        &.urgent svg {
          color: var(--success);
        }

        &.unread svg {
          color: var(--d-sidebar-suffix-color);
        }
      }
    }

    .sidebar-section-link-content-text {
      @include ellipsis;
      min-width: 0;
      flex: 0 1 auto;

      .user-status-message {
        vertical-align: -0.125em;
      }

      .emoji {
        width: 1em;
        height: 1em;
        vertical-align: baseline;
      }

      .badge-category__wrapper {
        font-size: 100%;
        width: 100%;

        .badge-category__name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  &.dropdown-menu__item .sidebar-section-link,
  .dropdown-menu__item .sidebar-section-link {
    height: var(--d-sidebar-row-height);
    padding-inline: var(--d-sidebar-row-horizontal-padding);
    border-radius: var(--token-radius-normal);
  }

  .--link-button {
    border: none;
    background: inherit;
  }

  .sidebar-section-link-review {
    .sidebar-section-link-content-badge {
      color: var(--danger);
    }
  }

  .sidebar-section-link-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--d-sidebar-section-link-prefix-width);

    #sidebar-section-content-chat-dms & {
      @include viewport.from(sm) {
        .prefix-text {
          font-size: var(--font-0);
        }
      }
    }

    .prefix-image {
      border: 1px solid transparent;
    }

    &.active .prefix-image {
      box-shadow: 0 0 0 1px var(--success);
    }

    &.image {
      img {
        border-radius: var(--token-radius-full);
        aspect-ratio: auto 20 / 20;
        width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
        height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
      }
    }

    &.text {
      text-align: center;
    }

    &.icon,
    &.square,
    &.emoji {
      position: relative;
      color: var(--d-sidebar-link-icon-color);

      svg {
        font-size: var(--d-sidebar-section-link-icon-size);
      }

      .prefix-badge {
        position: absolute;
        background-color: transparent;
        border-radius: var(--token-radius-full);
        padding: 2px 2px 3px;
        color: var(--d-sidebar-link-color);
        height: 0.5rem;
        width: 0.5rem;
        top: -0.2em;
        right: 0;
        margin-right: -0.2em;
      }
    }

    &.emoji img {
      width: var(--d-sidebar-section-link-emoji-size);
      height: var(--d-sidebar-section-link-emoji-size);
    }

    .prefix-square {
      width: 0.8em;
      height: 0.8em;
      border-radius: var(--category-badge-border-radius);
    }
  }

  .prefix-text {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--token-radius-full);
    background: var(--d-sidebar-prefix-background);
    color: var(--d-sidebar-prefix-color);
    width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
    height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
    font-size: var(--font-down-2);
  }

  .sidebar-section-link-hover {
    margin-left: auto;

    .sidebar-section-hover-button {
      opacity: 0;
      color: var(--d-sidebar-highlight-color);
      border: none;
      height: 100%;
      padding-inline: var(--space-1);

      &:focus,
      .discourse-no-touch & {
        &:hover {
          color: var(--d-sidebar-highlight-color);
          background: var(--d-sidebar-highlight-hover-background);

          svg {
            color: var(--d-sidebar-active-icon-color);
          }
        }
      }

      svg {
        font-size: var(--font-down-1);
        margin: 0;
        color: var(--d-sidebar-highlight-color);
      }
    }
  }

  &.--hovering .sidebar-section-hover-button {
    opacity: 1;
  }
}