discourse/app/assets/stylesheets/common/base/new-user.scss

@use "lib/viewport";

@mixin bordered-horizontal-nav($border-width) {
  li {
    flex: 1 1 auto;
    margin: 0;
    display: flex;

    a {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      @include viewport.until(xl) {
        font-size: var(--font-0);
      }

      span {
        line-height: normal;

        @include ellipsis;
      }
    }
  }
}

@mixin bordered-nav-pills {
  width: 100%;
  margin: 0;

  .d-icon {
    font-size: var(--font-down-1);
  }

  &.main-nav {
    @include viewport.until(lg) {
      li {
        .d-icon {
          font-size: var(--font-up-1);
          margin: 0;
        }

        span {
          display: none;
        }
      }
    }

    .has-sidebar-page & {
      @include viewport.until(lg) {
        span {
          display: none;
        }
      }
    }
  }
}

.new-user-wrapper {
  .user-navigation {
    --user-navigation__border-width: 4px;
    border-bottom: 1px solid var(--content-border-color);

    .nav-pills {
      @include bordered-nav-pills;
      @include bordered-horizontal-nav(var(--user-navigation__border-width));
    }
  }

  .user-navigation-primary {
    [class*="horizontal-overflow-nav__scroll"] {
      font-size: var(--font-up-1);

      .d-icon {
        margin-top: 0.15em; // minor alignment
      }
    }
  }

  [class*="horizontal-overflow-nav__scroll-"] {
    --fade-color: var(--d-content-background, var(--secondary));
    background-color: var(--d-content-background, var(--secondary));
  }

  .user-navigation-secondary {
    position: relative;
    display: flex;
    min-width: 0;
    gap: 0 0.5em;
    font-size: var(--font-down-1);

    .select-kit .select-kit-header {
      height: 100%;
      padding: 0.5em 1em;
    }

    .select-kit-collection {
      font-size: var(--font-up-1);
    }

    .messages-dropdown-trigger {
      @include viewport.from(sm) {
        max-width: clamp(100px, 20vw, 200px);
      }
      box-sizing: border-box;

      .d-button-label {
        @include ellipsis;
      }
    }

    .category-breadcrumb {
      width: auto;
      margin: calc(var(--nav-space) / 2) 0;

      @include viewport.until(xl) {
        font-size: var(--font-down-1);
      }

      > li {
        margin: 0;
      }
    }

    .navigation-controls {
      margin: calc(var(--nav-space) / 2) 0;
      flex-wrap: nowrap;

      @include viewport.until(xl) {
        font-size: var(--font-down-1);
      }
    }

    .nav-pills {
      flex: 1 1 auto;
      justify-content: flex-start;
      height: 100%;

      li {
        flex: 1 0 auto;

        a {
          span {
            text-overflow: unset;
          }
        }
      }
    }
  }

  .empty-state {
    margin: 1em 0;
  }

  .solo-preference {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}

.user-preferences-tracking-page {
  .user-preferences .form-vertical {
    width: 100%;
  }
}

.user-preferences__tracking-topics-wrapper {
  margin-bottom: 3em;

  .control-label {
    margin-bottom: 1em;
  }
}

.user-preferences__tracking-categories-tags-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 2em;

  .control-group {
    width: 100%;
    min-width: 16em;
  }
}

%unread-icon {
  font-size: var(--font-down-4);
  margin: 0 0.375rem;
  color: var(--token-color-background-accent-subtle);
}

.user-messages-page {
  .messages-dropdown-trigger {
    .d-icon-d-unread {
      @extend %unread-icon;
    }

    .btn:hover {
      .d-icon-d-unread {
        color: var(--tertiary);
      }
    }

    .d-icon-angle-down {
      margin-right: 0;
    }
  }

  .messages-dropdown-content {
    .dropdown-menu__item {
      .d-icon-d-unread {
        @extend %unread-icon;
      }

      .btn:hover {
        .d-icon-d-unread {
          color: var(--tertiary);
        }
      }

      .btn.is-selected {
        background: var(--d-selected);
        color: var(--d-selected-text-color);
      }
    }
  }
}

@include viewport.until(sm) {
  .user-content {
    margin-top: 1em;
  }

  // user messages have some additional controls
  // so we need a special layout to acommodate on small screens
  .user-messages-page {
    .user-navigation-secondary {
      display: grid;
      grid-template-areas:
        "dropdown controls"
        "nav-pills nav-pills";
      grid-template-columns: 1fr auto;
      font-size: var(--font-up-1);
      gap: 0.5em;

      .category-breadcrumb {
        grid-area: dropdown;
      }

      .horizontal-overflow-nav {
        grid-area: nav-pills;
      }

      .navigation-controls {
        grid-area: controls;
        font-size: var(--font-down-2);

        .btn {
          padding: 0.5em 1em;
        }

        .d-button-label,
        .select-kit-header-wrapper .name {
          display: none;
        }

        .d-icon {
          margin: 0;
        }
      }

      .user-nav-messages-dropdown {
        max-width: unset;
      }

      .combo-box-header {
        font-size: var(--font-0);
      }
    }

    tbody {
      border-top-width: 1px;
    }

    .user-content {
      margin: 0;

      table {
        margin-top: -1px; // align under nav border
      }
    }
  }
}