lila/ui/lib/css/component/_subnav.scss

.subnav {
  a {
    @extend %page-text;

    white-space: nowrap;
  }

  &__inner {
    @include backdrop-blur-if-transparent;
  }

  @include mq-subnav-top {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 100%;

    &__inner {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 3px;
      overflow: auto clip;

      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
      }
    }

    a {
      font-family: Roboto, sans-serif;
      display: flex;
      align-items: center;
      color: $c-font;
      padding: 0.6rem;

      &:hover {
        color: $c-link;
      }

      &.active {
        color: $c-font-clear;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 4px;
          right: 50%;
          transform: translate(50%, -50%);
          width: 100%;
          background: $c-accent;
          border-radius: 1em;
        }
      }
    }

    .sep {
      display: none;
    }
  }

  @include mq-subnav-side {
    margin-right: 10px;
    z-index: $z-subnav-side-2;

    &__inner {
      @include box-radius;
    }

    /* active border must go over the page content */
    a {
      @include box-radius;

      display: flex;
      align-items: center;
      gap: 1ch;
      overflow: hidden;
      color: $c-font-page;
      padding: 0.7rem 2vw 0.7rem 0.8rem;
      position: relative;

      &.active,
      &:hover {
        color: $c-font-clear;
        background: rgba(128, 128, 128, 0.07);
      }

      &.active {
        background: $c-bg-box;
      }
    }

    .sep {
      height: 2em;
    }
  }
}