@import "func/icons";

.quicklinks {
  padding: 2px;

  background: linear-gradient(#121a25 34px, #495770);
  @radius: 6px;
  border-radius: @radius;

  h2 {
    margin: 0;
    padding: .7em;
    text-align: center;
    line-height: 1;
  }

  ol {
    display: flex;
    flex-flow: column;
    padding: 2px;
    row-gap: 4px;

    background: #121d29;
    border-radius: @radius;
  }

  a {
    @radius: 4px;
    border-radius: @radius;
    box-shadow: 1px 1px 1px #0006;

    &:hover {
      text-decoration: none;

      >span {
        color: #8cadff;
        filter: brightness(120%) saturate(115%);
      }
    }

    >span {
      display: flex;
      align-items: center;
      padding: .3rem;

      font-size: 80%;
      text-transform: uppercase;
      font-weight: bold;
      color: #c2ccdb;
      background: linear-gradient(#2c394f, #222a3a 20%, #1c2331 55%, #222a3a 95%, #43414f);
      border: 1px solid;
      border-color: #ebe9ff5e #0000002e #0000 #585475;
      border-radius: @radius;

      >.micro.tier {
        margin-left: 1ch;
      }

      @ico-width: 1.2rem;

      // Icon.
      &:before {
        content: '';
        width: @ico-width;
        height: $width;
        margin-right: .7em;

        background: linear-gradient(#232324, #171c1f);
        mask: no-repeat 50%;
      }
      &.\32 50:before {
        mask-image: #icons.cup()[mask-image];
      }
      &.gems:before {
        mask-image: #icons.gem()[mask-image];
      }
      &.cranking:before {
        mask-image: #icons.custom()[mask-image];
      }
      &.new:before {
        #icons.star();
      }
      &.curyear:before {
        mask-image: #icons.calendar()[mask-image];
      }
      &.trend:before {
        mask-image: #icons.trend()[mask-image];
      }
      &.played:before {
        mask-image: #icons.gamepad()[mask-image];
      }

      // Icon background.
      &:after {
        content: '';
        order: -1;
        width: @ico-width + .25rem;
        height: $width;
        // Pull icon back over background.
        margin-right: -(@ico-width + ($width - @ico-width) / 2);

        border-radius: 2px;
        background: linear-gradient(158deg, #6f7f8c, #cbcfd1 30%, #babcbf 81%, #738491);
        box-shadow: 1px 1px 1px #16202d;
      }
    }
  }
}
