@import "func/icons";

ol.menu {
  position: sticky;
  width: 100%;
  height: 36px;
  z-index: 10;
  flex-shrink: 0;
  /* Google cache fix for fixed menu. */
  top: 0;

  white-space: nowrap;
  text-align: center;
  background: linear-gradient(180deg, #14161c 70%, #171a21);

  // Do expando.
  li:hover > ol {
    overflow: visible;
    max-height: 60vh;

    transition-delay: 0s;
  }

  >li {
    position: relative;
    display: inline-flex;
    flex-flow: column;
    justify-content: center;
    height: 100%;
    margin: 0 1.68%;
    padding: 0 1%;

    cursor: pointer;
    color: #9e814c;

    &:after {
      content: '▼';
      position: relative;
      top: -2px;
      line-height: 1;

      font-size: 65%;

      transition: top .15s;
    }
    &:hover:after {
      top: 1px;
    }

    >a {
      color: #b3b5bd;
      text-decoration: none;

      transition: color .3s;
    }
    &:hover > a {
      color: #cfab72;
    }

    /* First level menus (most rules cascade to second level). */
    ol {
      position: absolute;
      top: 100%;
      left: 50%;
      max-height: 0;
      overflow: hidden;
      z-index: 10;
      transform: translate(-50%, 0);

      text-align: left;
      background: #171a21;
      border-radius: 0 0 2px 2px;
      box-shadow: 0 2px 3px rgba(38, 61, 91, .43);

      transition: max-height .3s .15s;

      li {
        display: block;
        line-height: 1;

        background: linear-gradient(90deg, transparent, #07080a, transparent) no-repeat bottom;
        background-size: 95% 1px;

        &:last-of-type {
          background: none;
          border-radius: 0 0 2px 2px;

          >a {
            padding-bottom: calc(.2em + 3px);
          }
        }

        >a {
          display: block;
          min-width: 45px;
          padding: calc(.2em + 3px) .8em calc(.2em + 4px);
        }

        a:has(+ ol):after {
          content: '▶';
          position: absolute;
          top: 50%;
          right: 1em;
          transform: translate(0, -50%);

          font-size: 65%;

          transition: right .15s;
        }

        &:hover {
          background: linear-gradient(90deg, #9e814c, #cfab72, #9e814c);
          text-decoration: none;

          >a {
            color: #07080a;
            text-shadow: 1px 1px 1px #cfab72;
            text-decoration: none;

            &[class]:before {
              filter: brightness(14%);
            }
          }

          a:has(+ ol):after {
            right: calc(1em - 3px);
          }
        }
      }
    }

    >ol > li {
      position: relative;

      /* Second level */
      >ol {
        position: absolute;
        top: 0;
        left: 99.5%;
        transform: none;
      }
    }

    /* Long second-level menus with smaller fonts and scrollbars. */
    &:nth-child(3) > ol, ol.annual {
      overflow-y: auto;
      overflow-x: hidden;

      font-size: 90%;
    }
    ol.annual {
      column-count: 2;

      text-align: center;
    }

    // Tag menu two-column layout.
    &:nth-child(3) > ol {
      display: grid;
      grid: auto/auto auto;

      >li {
        &:first-child {
          grid-column: span 2;

          font-size: 120%;

          >a {
            padding-top: 1ex;
            padding-bottom: $padding-top;
          }
        }

        &:nth-child(2) {
          grid-column: span 2;

          text-align: center;
        }
      }
    }

    /* Classified items. */
    a[class] {
      display: flex;
      gap: .7ch;
      align-items: center;

      &:before {
        content: '';
        --width: 1em;
        width: var(--width);
        height: $width;

        background: linear-gradient(#d9b882, #947e59) $mask;
        // Fudge size for scuffed Chrome SVG renderer.
        mask: no-repeat 0/99% 100%;
      }

      &.cup:before {
        #icons.cup();
      }
      &.history:before {
        #icons.history();
      }
      &.gem:before {
        #icons.gem();
      }
      &.trend:before {
        #icons.trend();
      }
      &.pad:before {
        #icons.gamepad();
      }
      &.custom:before {
        #icons.custom();
      }
      &.mac:before {
        #icons.mac();
      }
      &.linux:before {
        #icons.linux();
      }
      &.deck:before {
        #icons.deck();
      }
      &.tag {
        justify-content: center;

        &:before {
          --width: 1.2em;
          mask-image: url(/svg/tag.svg);
        }
      }
      &.email:before {
        #icons.email();
      }
      &.myrank:before {
        --width: 1.1em;
        #icons.myrank();
      }
      &.members:before {
        #icons.members();
      }
      &.patreon:before {
        --width: .9em;
        background-image: url(//s.steam250.com/img/patreon.svg);
      }
      &.discord:before {
        --width: 1.3em;
        margin-left: -.4em;

        mask-image: url(/svg/discord.svg);
        mask-size: 110%;
        background: linear-gradient(#96aaf2, #5067b3);

        translate: 2px;
      }
      &.steam:before {
        mask-image: url(/svg/steam.svg);
        background: linear-gradient(#fffbf2, #bab7b1);
      }
    }

    &:nth-child(5) > ol {
      >li:nth-last-of-type(2):hover {
        background-image: linear-gradient(90deg, #4b60a6, #7289da, #4b60a6);

        >a {
          text-shadow: 1px 1px 1px #7289da;
        }
      }
    }

    ol.t11g {
      overflow: hidden !important;
    }
  }

  .micro.tier {
    margin: 0;

    opacity: .9;
    font-size: 75%;
    text-shadow: none;
    line-height: 1.3;

    &:hover {
      filter: brightness(112%) saturate(120%);
    }
  }
}
