zitadel/console/src/app/modules/nav/nav.component.scss

@mixin nav-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $accent: map-get($theme, accent);
  $primary-color: map-get($primary, 500);

  $warn-color: map-get($warn, 500);
  $accent-color: map-get($accent, 500);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $back: map-get($background, background);

  .nav-col {
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    align-items: flex-start;
    transform: transale3d(0, 0, 0);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;

    .nav-row {
      position: relative;
      width: 100%;
      height: 40px; // Increased height to accommodate the line
      overflow: visible; // Allow the indicator line to show below

      .nav-row-abs {
        padding: 0 2rem;
        max-width: 80rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden; // Allow the indicator line to show
        align-self: stretch;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        @media only screen and (max-width: 500px) {
          padding: 0 1rem 0 1rem;
        }

        .fill-space {
          flex: 1;
        }

        .nav-item {
          display: flex;
          align-items: center;
          transition: all 0.2s ease;
          text-decoration: none;
          border-radius: 50vw;
          font-weight: 500;
          margin: 0.25rem 2px;
          font-size: 14px;
          white-space: nowrap;
          position: relative;
          height: 36px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          border: 0;
          background: transparent;
          border-radius: 6px;
          padding: 0 0.5rem;
          cursor: pointer;
          color: map-get($foreground, text);
          opacity: 0.8;

          &::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            width: 0;
            height: 2px;
            background-color: map-get($foreground, text);
            // transition: width 0.2s ease;
            border-radius: 2px;
            z-index: 999;
          }

          &:hover {
            opacity: 1;
            color: map-get($foreground, text);
            background-color: if($is-dark-theme, #ffffff10, #00000010);
          }

          .c_label {
            display: flex;
            align-items: center;
            text-align: center;

            .count {
              display: none;
              align-items: center;
              justify-content: center;
              height: 17px;
              width: 17px;
              border-radius: 50%;
              padding: 2px;
              margin: -2px -9px -2px 8px;
              margin-left: 6px;
              background-color: if($is-dark-theme, #ffffff20, #00000020);
              line-height: 18px;
              font-size: 11px;
              transition: background 0.2s ease;
            }
          }

          &.external-link {
            padding-right: 2rem;

            i {
              position: absolute;
              right: 8px;
              font-size: 1.2rem;
            }
          }

          &.active {
            opacity: 1;

            &::after {
              width: 100%;
            }

            .c_label {
              .count {
                display: inline-block;
                background-color: if($is-dark-theme, #00000020, #ffffff20);
              }
            }
          }
        }
      }
    }

    .mat-mdc-menu-content,
    .mat-mdc-menu-panel {
      background-color: $back;
      border-radius: 0.5rem;

      @include mat.elevation(5);

      .active {
        color: $primary-color !important;
        background-color: rgba($color: $primary-color, $alpha: 0.1) !important;
      }
    }

    .root-header {
      background-color: $back !important;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      .slash {
        color: if($is-dark-theme, #525454, #d1d5d9);
      }

      .org-button {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
      }
    }

    .divider {
      .span {
        border-color: map-get($foreground, divider);
      }

      .line {
        background-color: map-get($foreground, divider);
      }
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
      background-color: map-get($background, background);
      border-radius: 1px;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    }

    ::-webkit-scrollbar {
      width: 2px;
      height: 2px;
      background-color: map-get($background, background);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    }

    ::-webkit-scrollbar-thumb {
      background-color: $primary-color;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    }
  }

  .fill-space {
    flex: 1;
  }

  .progress-bar {
    margin-right: 0.5rem;
    width: 100px;
    min-width: 50px;
    background: if($is-dark-theme, #ffffff20, #00000010);
    border: none;
    padding: 2px;
    border-radius: 50vw;
    cursor: pointer;
    display: flex;

    &:hover {
      background: if($is-dark-theme, #ffffff, $primary-color);
      transition: background ease 0.15s;
    }

    .progress-div {
      display: block;
      height: 100%;
      width: 100%;

      .progress {
        border-radius: 50vw;
      }
    }
  }

  .nav-shortcut-action-key {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 20px;
    width: 20px;
    position: relative;
    margin: 0 4px;
    cursor: default;

    .nav-key-overlay {
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: if($is-dark-theme, #fff, #000);
      opacity: 0.15;
      border-radius: 4px;
    }

    .span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% -50%);
      opacity: 1;
    }
  }
}

.onboarding_card {
  border-radius: 0.5rem;
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  border: 1px solid rgba(#8795a1, 0.2);
}