@use "sass:math";
@use "sass:color";
@use 'SpinThatShit';

$background00: #060100;
$background10: #161211;
$background15: #201b1a;
$background20: #282322;
$background20Tint: rgba(40,35,34,0.5);
$background25: #312c2a;
$background30: #393433;
$background40: #4a4644;

$text10: #EEE;
$text20: #DDD;
$text30: #CCC;
$textDisabled: #808080;

$qColor: #CA4;
$highlightBorderColor: #ff6;
$categoryHoverBorder: #aaf;
$categoryHoverGlow: #8080ff;

$columnHeaderHoverBackground: #8080ff;
$rowHoverStart: color.adjust($columnHeaderHoverBackground, $alpha: -1);
$rowHoverEnd: color.adjust($columnHeaderHoverBackground, $alpha: -0.4);

$subsubCategoryHoverStart: color.adjust($columnHeaderHoverBackground, $alpha: -0.9);
$subsubCategoryHoverEnd: $rowHoverEnd;
$rowHighlightColor: #e6b335;
$subsubCategoryBackgroundStart: color.adjust($rowHighlightColor, $alpha: -0.9);
$subsubCategoryBackgroundEnd: color.adjust($rowHighlightColor, $alpha: -0.4);

$buttonRed: #640000;
$buttonRedBright: #CC0C00;
$buttonText: #ffd100;

$priceChart: #88F;
$quantityChart: #F88;

$fontArial: "Arial Narrow", sans-serif;
$fontSizeArial: 19px;
$fontFriz: "Friz Quadrata TT", sans-serif;
$fontSizeFriz: 16px;

$borderRadius: 8px;
$marginStep: 8px;
$thin: 1px;
$bevel: 2px;
$buttonBorder: 2px;

$pageMinHeight: 400px;
$pageMaxHeight: 1000px;
$pageMaxWidth: 1400px;

$categoryMinWidth: 150px;
$categoryMaxWidth: 200px;
$priceWidth: 175px;
$silverWidth: 1.75em;

$tooltipBorderSize: 1px;
$tooltipPadding: 8px;
@mixin tooltip {
  background-color: rgba(1, 7, 33, 0.8);
  border: $tooltipBorderSize solid;
  border-color: #cfcfcf #777 #7f7f7f;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px black;
  padding: $tooltipPadding;
  z-index: 20;
}

@mixin button {
  background-color: $background20;
  border: $bevel solid;
  border-color: $background30 $background25 $background10;
  border-radius: $borderRadius * 0.75;
  color: $text10;
  font: $fontSizeFriz * 0.8 $fontFriz;
  text-shadow: $thin $thin $thin * 2 #000;

  @media (hover: hover) {
    &:hover {
      background-color: $columnHeaderHoverBackground;
      box-shadow: inset 0 0 10px 5px $background20;
    }
  }
}

@mixin button-red {
  @include button();

  $borderUpper: color.mix($buttonRed, #CCC, $weight: 90%);
  $borderLower: color.mix($buttonRed, #000, $weight: 70%);
  background-color: $buttonRed;
  border-color: $borderUpper $borderUpper $borderLower;
  color: $buttonText;
  font-size: $fontSizeFriz * 1.1;

  @media (hover: hover) {
    &:hover {
      background-color: $buttonRedBright;
      box-shadow: inset 0 0 10px 5px $buttonRed;
      color: $text10;
    }
  }
}

@font-face {
  font-family: "Arial Narrow";
  src: url("/fonts/arialn.ttf") format("truetype");
}
@font-face {
  font-family: "Friz Quadrata TT";
  src: url("/fonts/frizqt__.ttf") format("truetype");
}

$scrollbarThumb: $background40;
$scrollbarTrack: $background10;

.wowhead-tooltip .whtt-extra {display: none}

* {
  scrollbar-width: thin;
  scrollbar-color: $scrollbarThumb $scrollbarTrack;

  &::-webkit-scrollbar {
    width: 16px;

    &-track {
      background: $scrollbarTrack;
    }

    &-thumb {
      background-color: $scrollbarThumb;
      border: 4px solid $scrollbarTrack;
    }
  }
}

input[type="number"] {
  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  -moz-appearance: textfield;
}

body {
  align-items: center;
  background-color: $background00;
  color: $text10;
  display: flex;
  font: 16px sans-serif;
  min-height: $pageMinHeight;
  height: 100vh;
  margin: 0;

  a {
    color: $text10;
  }
}

.main {
  background-color: $background30;
  border-radius: $borderRadius;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0 auto;
  min-height: $pageMinHeight;
  max-height: $pageMaxHeight;
  max-width: $pageMaxWidth;
  user-select: none;
  width: 100%;

  @media screen and (max-width:600px) {
    max-height: none;
  }

  .button-border {
    background-color: black;
    border: $buttonBorder solid;
    border-color: $background40 $background20 $background20;
    border-radius: $borderRadius * 0.75 + 4px;
    max-width: 10em;
    overflow: hidden;
    padding: 1px;
    perspective: 100px;
    perspective-origin: bottom left;

    button {
      box-sizing: border-box;
      height: 100%;
      width: 100%;

      &:active {
        transform: translateZ(-2px);
      }
    }
  }

  .search-bar {
    display: flex;
    margin: $marginStep $marginStep 0;

    & > * {
      flex: 1 1;
      margin: $marginStep;
    }

    select, input[type="text"], input[type="number"], > div.filter, button {
      font: $fontSizeFriz * 0.8 $fontFriz;
    }
    select, input[type="text"] {
      background-color: $background20;
      border: $bevel solid;
      border-color: $background00 $background00 $background40;
      border-radius: $borderRadius;
      color: $text10;
      padding: math.div($marginStep, 2);
    }
    div.text-container {
      flex: 5 1;
      position: relative;

      .text-reset {
        background-image: url("/images/clear-search.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        opacity: 0.5;
        position: absolute;
        right: $marginStep * 0.5;
        top: 0;
        width: 1em;
        z-index: 10;

        &:hover {opacity: 1}
      }

      $textLeftPadding: 2em;

      input[type="text"] {
        background-image: linear-gradient($background20Tint, $background20Tint), url("/images/eyeglass.png");
        background-position: 3px center;
        background-repeat: no-repeat;
        background-size: 1.25em;
        box-sizing: border-box;
        height: 100%;
        padding-left: $textLeftPadding;
        width: 100%;

        &:placeholder-shown + .text-reset {display: none}
      }

      .datalist {
        @include tooltip();
        background-color: $background20;
        box-sizing: border-box;
        display: none;
        font: $fontSizeFriz * 0.8 $fontFriz;
        max-height: calc((1.333em + #{$marginStep}) * 4 + #{$tooltipBorderSize} * 2);
        left: $textLeftPadding;
        overflow-y: auto;
        padding: 0;
        position: absolute;
        top: calc(100% + 2px);
        width: calc(100% - #{$textLeftPadding});

        div {
          $iconBorderSize: 1px;
          $iconMargin: 5px;
          $iconSize: $fontSizeFriz;

          cursor: pointer;
          overflow: hidden;
          padding: $marginStep * 0.5 $tooltipPadding;
          padding-left: $marginStep * 0.5 + $iconSize + 2 * $iconBorderSize + $iconMargin + $tooltipPadding;
          position: relative;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:empty {
            display: none;
          }

          &.selected {
            background-color: $background30;
            font-weight: bold;
          }

          img {
            border: $iconBorderSize solid #808080;
            border-right-color: #555;
            border-bottom-color: #555;
            border-radius: 4px;
            height: $iconSize;
            left: $marginStep * 0.5 + $tooltipPadding;
            position: absolute;
            top: 3px;
            width: $iconSize;
          }
        }
      }

      &[data-with-focus] .datalist[data-with-items] {
        display: block;
      }
    }
    button, a.filter, a.small-button {
      @include button();

      max-width: 10em;

      &.favorite {
        background-image: url('/images/favorite-star-off.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: calc(100% - 2px);

        &[data-enabled] {
          background-image: url('/images/favorite-star.png');
        }
      }
      &.deals {
        background-image: url('/images/goldclover.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: calc(100% - 4px);
      }
      &.small-button {
        flex: 0 0 auto;
        width: 2em;
        height: 2em;

        @media (hover: hover) {
          &:hover {
            background-color: $background20;
            box-shadow: none;
          }
        }

        &:active {
          translate: -1px 1px;
        }
      }
      &.favorite:not([data-enabled]):active {translate: none}
      &.search {
        @include button-red();
      }
      &.filter {
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: 2;
        min-width: 5em;
        padding-right: 1em;
        position: relative;
        z-index: 20;

        @media screen and (max-height:500px) {
          line-height: 1;
        }
        &::after {
          background-image: url("/images/triangle-arrow.png");
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
          bottom: 0;
          content: "";
          position: absolute;
          right: 4px;
          top: 0;
          width: 0.666em;
        }

        > div {
          @include tooltip();
          display: none;
          min-width: 15em;
          position: absolute;
          right: calc(-100% - #{2 * ($marginStep + 2 * $bevel)});
          text-align: left;
          top: calc(100% + #{2 * $bevel});
          width: calc(200% + #{2 * $bevel});

          input {
            margin: 0;
            position: relative;
            top: 2px;
          }

          input[type="number"] {
            background-color: $background20;
            border: $bevel solid;
            border-color: $background00 $background00 $background40;
            border-radius: $borderRadius;
            color: $text10;
            padding: 0 0.5em;
            text-align: right;
            width: 3em;
          }

          table.rarity td:first-child {text-align: right}
        }

        label.disabled {cursor: not-allowed; color: $textDisabled}
      }
    }

    > .button-border {
      margin: $marginStep - 3px $marginStep;
      button {max-width: unset}
    }

    .patron-text {font-size: 125%; position: relative; text-align: center; z-index: 5}

    @media screen and (max-width:700px) {
      flex-flow: row wrap;

      > div.filter.filter div {
        left: -100%;
        right: 0;
        width: unset;
      }

      > div.text-container {}
      > select {order: 1}
      > div.filter.filter {order: 2}
      > div.small-button {order: 3}
      > div.text-container {order: 4; min-width: 50%}
      > button.search {order: 5}
    }
  }

  .main-result {
    display: flex;
    flex: 1 1;

    @media screen and (max-width:550px) {
      flex-direction: column;
    }

    & > div {
      margin: $marginStep
    }

    .categories {
      bottom: math.div($marginStep, 2);
      left: math.div($marginStep, 2);
      overflow-y: auto;
      position: absolute;
      right: math.div($marginStep, 2);
      top: math.div($marginStep, 2);

      &::-webkit-scrollbar-thumb {
        border-right:0;
        border-left-width:6px;
      }

      &-parent {
        background-color: $background10;
        border: $bevel solid;
        border-color: $background00 $background10 $background40;
        border-radius: $borderRadius;
        flex: 2 1;
        position: relative;
        margin: $marginStep 0 $marginStep $marginStep;
        max-width: $categoryMaxWidth;
        min-width: $categoryMinWidth;

        @media screen and (max-width:600px) {
          max-width: calc(100% - #{2 * ($marginStep + $bevel)});
          margin-bottom: 0;
        }
      }

      & > div {
        background-color: $background20;
        border: $bevel solid;
        border-color: $background30 $background20 $background10;
        border-radius: $borderRadius;
        color: $qColor;
        cursor: pointer;
        font: $fontSizeFriz * 0.85 $fontFriz;
        margin: math.div($marginStep, 2) 0;
        overflow: hidden;
        padding: $marginStep * 0.5 $marginStep * 0.75;
        text-overflow: ellipsis;
        text-shadow: $thin $thin $thin #000;
        white-space: nowrap;

        &:first-child {
          margin-top: 0
        }

        &[data-selected] {
          box-shadow: inset 0 0 8px 2px $highlightBorderColor;
        }

        @media (hover: hover) {
          &:hover {
            border-color: $categoryHoverBorder;
            box-shadow: inset 0 0 20px 2px $categoryHoverGlow;
            color: $text10;
          }
        }

        @media screen and (max-width:550px) {
          font-size: $fontSizeFriz * 0.7;
        }
      }

      .subcategory, .subsubcategory {
        color: $text20;
        margin-left: $marginStep * 2;

        &:not([data-visible]) {
          display: none
        }
      }

      .subsubcategory {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        padding-left: $marginStep * 2;
        position: relative;
        &:after {
          background-image: url("/images/subsub.png");
          background-repeat: no-repeat;
          background-size: contain;
          bottom: 4px;
          content: '';
          left: $marginStep * 0.5;
          position:absolute;
          top: 4px;
          width: $marginStep;
        }

        &[data-selected] {
          box-shadow: none;
          background: linear-gradient(90deg, $subsubCategoryBackgroundStart 0%, $subsubCategoryBackgroundEnd 40%, $subsubCategoryBackgroundEnd 60%, $subsubCategoryBackgroundStart 100%);
        }

        @media (hover: hover) {
          &:hover {
            box-shadow: none;
            background: linear-gradient(90deg, $subsubCategoryHoverStart 0%, $subsubCategoryHoverEnd 40%, $subsubCategoryHoverEnd 60%, $subsubCategoryHoverStart 100%);
          }
        }
      }
    }

    .welcome {
      align-items: center;
      bottom: math.div($marginStep, 2);
      color: $text30;
      display: flex;
      flex-flow: column nowrap;
      font: $fontSizeFriz $fontFriz;
      gap: 2em;
      left: math.div($marginStep, 2);
      line-height: 1.66;
      overflow-y: auto;
      position: absolute;
      right: math.div($marginStep, 2);
      text-align: center;
      top: math.div($marginStep, 2);
      z-index: 3;

      h1, h2, b {color: $text10}
      h1 {margin: 0}

      .full-screen button {
        @include button();
        padding: $marginStep;
      }

      .info {
        box-sizing: border-box;
        font: 14px sans-serif;
        line-height: 1.5;
        max-width: 50em;
        padding: 0 1em;
        text-align: left;
        width: 100%;

        h2 {
          font: $fontSizeFriz * 1.5 $fontFriz;
        }
      }

      > .welcome-bottom {margin-top: auto}
      > :last-child {margin-bottom: 1em}

      &[data-maintenance] div {display: none}
      &[data-maintenance] div.maintenance {display: block !important}
    }

    .search-result, .item {
      flex: 7 1;
      font: $fontSizeArial $fontArial;
      position: relative;
    }

    .search-result {
      background-color: $background10;
      background: linear-gradient(180deg, $background10 0%, $background15 100%);
      border: $bevel solid;
      border-color: $background00 $background10 $background40;
      border-radius: $borderRadius;

      .search-result-limits {
        position: relative;
        margin: 0 auto;
        width: calc(100% - #{$marginStep});
        height: 100%;
        max-width: 800px;

        &[data-with-median] {
          max-width: 1000px;
        }
      }

      .search-result-border {
        border: $thin solid $background30;
        border-top: 0;
        border-radius: math.div($borderRadius, 2);
        bottom: #{math.div($marginStep, 2) + $thin};
        left: $thin;
        overflow-y: auto;
        position: absolute;
        right: $thin;
        top: #{math.div($marginStep, 2) + $thin};

        &:empty {display: none}
      }

      @media screen and (max-width:750px) {
        font-size: 80%;
      }

      @media screen and (max-width:1100px) {
        thead td[data-col-name="median"] {display: none}
        tbody td.median {display: none}
      }

      table {
        border-radius: $borderRadius $borderRadius 0 0;
        border-spacing: 0;
        width: 100%;

        thead {
          background-color: $background20;
          border-radius: $borderRadius $borderRadius 0 0;
          font: $fontSizeFriz * 0.8 $fontFriz;

          td {
            border: $thin solid $background40;
            border-bottom-color: $background30;
            border-radius: math.div($borderRadius, 2) math.div($borderRadius, 2) 0 0;
            cursor: pointer;
            padding: math.div($marginStep, 2) 0 math.div($marginStep, 2) math.div($marginStep, 2);
            &:first-child {border-left: 0}
            &:last-child {border-right: 0}

            &[data-sort]::after {
              background-image: url("/images/sort-arrow.png");
              background-repeat: no-repeat;
              background-size: contain;
              content: "";
              display:inline-block;
              height: 1em;
              margin-left: 0.25em;
              position: relative;
              top: 2px;
              width: 1em;
            }
            &[data-sort="asc"]::after {
              transform:scaleY(-1);
            }

            @media (hover: hover) {
              &:hover {
                background-color: $columnHeaderHoverBackground;
                box-shadow: inset 0 0 10px 8px $background20;
              }
            }
          }
        }

        tbody {
          $iconBorderSize: 1px;
          $iconMargin: 6px;
          $iconSize: $fontSizeArial - 2 * $iconBorderSize;

          tr {
            cursor: pointer;
            &.vendor-flip {
              background: linear-gradient(90deg,
                color.adjust($rowHighlightColor, $alpha: -0.9) 0%,
                color.adjust($rowHighlightColor, $alpha: -0.4) 40%,
                color.adjust($rowHighlightColor, $alpha: -0.4) 60%,
                color.adjust($rowHighlightColor, $alpha: -0.9) 100%
              );
            }
            body.no-row-backgrounds &.vendor-flip {background: color.adjust($rowHighlightColor, $alpha: -0.4)}

            @media (hover: hover) {
              &:hover {
                background: linear-gradient(90deg, $rowHoverStart 0%, $rowHoverEnd 20%, $rowHoverEnd 80%, $rowHoverStart 100%);

                span.favorite {visibility: visible !important}
              }
              body.no-row-backgrounds &:hover {background: $rowHoverEnd}
            }

            &.message {
              cursor: default;
              td {
                font-size: 120%;
                padding: $marginStep * 2;
                text-align: center;

                img {
                  height: 1.2em;
                  margin: 0 0.25em;
                  vertical-align: text-bottom;
                }
              }
              @media (hover: hover) {
                &:hover {
                  background: unset;
                }
              }
            }
          }
          td {
            padding: math.div($marginStep, 4) $marginStep;
            &.price {
              text-align: right;
              width: $priceWidth;
              .silver {display: inline-block; width: $silverWidth}

              // Nonsense to handle the row-wide link.
              padding-top: 0;
              > * {
                position: relative;
                top: math.div($marginStep, 4);
              }
              > a {
                height: calc(1.25em + #{math.div($marginStep, 2)});
                left: 0;
                position: absolute;
                right: 0;
                top: unset;
                z-index:5;
              }

              &.median {
                font-size: 80%;
                width: $priceWidth * 0.8;
              }
            }

            &.name {
              max-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 50%;

              a {text-decoration: none}
              .icon {
                border: $iconBorderSize solid #808080;
                border-right-color: #555;
                border-bottom-color: #555;
                border-radius: 4px;
                height: 1em;
                margin-right: 6px;
                position: relative;
                top: 2px;
                width: 1em;
              }
              .quality-tier {height: 1.25em; padding-left: 0.25em; vertical-align: bottom}
            }

            &.quantity {
              padding-right: 1em;
              position: relative;
              .delta-timestamp {
                font-size: 70%;
                padding-left: 1em;
                white-space: nowrap;
              }
              span.favorite {
                background-image: url('/images/favorite-star-off.png');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                bottom: 0;
                position: absolute;
                right: 0;
                top: 0;
                width: calc(1em + #{2 * $iconBorderSize});
                z-index: 10;

                @media (hover: hover) {
                  visibility: hidden;
                }

                &[data-favorite] {
                  background-image: url('/images/favorite-star.png');
                  visibility: visible;
                }
              }
            }
          }
          &[data-side-icon] td.name {
            img.icon {margin-left: calc(1em + #{$iconMargin + 2 * $iconBorderSize});}
            &[data-side-icon] img.icon {margin-left:0}
          }
        }
      }

      .restricted {
        filter: blur(4px);
      }
    }

    .item {
      display: none;
      flex-direction: column;

      button {
        @include button-red();

        padding:0 3em;
      }

      .back-bar {
        align-items: flex-end;
        display: flex;
        justify-content: space-between;
        margin: $marginStep;

        @media screen and (max-width:600px) {
          margin-top: 0;
        }
        .alt-realm {
          flex: 1 1;
          margin: 0 $marginStep;
          text-shadow: $thin $thin $thin #000;
        }

        .available {
          color: $qColor;
          font: $fontSizeFriz * 0.9 $fontFriz;
          text-shadow: $thin $thin $thin #000;
        }
      }

      .panels {
        display: flex;
        flex: 1 1;

        @media screen and (max-width:700px) {
          flex-direction: column;
          font-size: 80%;
        }

        & > div {
          border: $bevel solid;
          border-color: $background00 $background10 $background40;
          border-radius: $borderRadius;
          padding: math.div($marginStep, 2);
          position: relative;

          .scroller {
            bottom: math.div($marginStep, 2);
            left: math.div($marginStep, 2);
            overflow-y: auto;
            position: absolute;
            right: math.div($marginStep, 2);
            top: math.div($marginStep, 2);

            .scroll-indicator {
              background: linear-gradient(to bottom, transparent, transparent 25%, rgba(0,0,0,0.666) 83%, transparent);
              bottom: -2rem;
              height: 12rem;
              pointer-events: none;
              position: absolute;
              transition: opacity 0.5s;
              width: 100%;
              z-index: 100;

              &[data-hidden] {opacity: 0}
            }
          }

          &.details {
            $panelBackground: $background20;
            background-color: $panelBackground;

            flex: 14 1;

            .title {
              align-items: center;
              background-color: $background15;
              border: $bevel solid;
              border-color: $background00 $background10 $background40;
              border-radius: $borderRadius;
              display: flex;
              font: $fontSizeFriz * 1.75 $fontFriz;
              margin: 2 * $marginStep;
              padding: 2 * $marginStep;
              position: relative;

              @media screen and (max-width:700px) {
                font-size: $fontSizeFriz * 1.25;
              }

              a {
                text-decoration: none;
              }

              .icon {
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                border-radius: 2em;
                display: inline-block;
                height: 2em;
                margin-right: 0.75em;
                position: relative;
                width: 2em;

                &:after {
                  background-image: url("/images/ring-1.png");
                  background-position: center center;
                  background-repeat: no-repeat;
                  background-size: contain;
                  bottom: -0.5em;
                  content: "";
                  left: -0.5em;
                  position: absolute;
                  right: -0.5em;
                  top: -0.5em;
                }
                &[data-quality="0"]:after {background-image: url("/images/ring-0.png")}
                &[data-quality="2"]:after {background-image: url("/images/ring-2.png")}
                &[data-quality="3"]:after {background-image: url("/images/ring-3.png")}
                &[data-quality="4"]:after {background-image: url("/images/ring-4.png")}
                &[data-quality="5"]:after {background-image: url("/images/ring-5.png")}
              }

              .quality-tier {height: 1.25em; padding-left: 0.25em; vertical-align: bottom}

              span.favorite {
                aspect-ratio: 1;
                background-image: url('/images/favorite-star-off.png');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                cursor: pointer;
                position: absolute;
                right: 0.1em;
                top: 0.1em;
                width: 1em;

                &[data-favorite] {
                  background-image: url('/images/favorite-star.png');
                }
              }
            }

            .framed {
              border-top: $bevel solid $background30;
              margin: $marginStep * 4 $marginStep;
              padding: $marginStep * 2 $marginStep * 0.5 $marginStep * 0.5;
              position: relative;

              .frame-title {
                background-color: $panelBackground;
                color: $text20;
                font: $fontSizeArial * 0.8 $fontArial;
                left: $marginStep;
                line-height: 1.25em;
                padding: 0 $marginStep;
                position: absolute;
                top: -0.675em;
              }
            }

            .section-parent {
              display: flex;
              flex-flow: column nowrap;

              & > [data-section-key] > .section-controls {
                background-color: $panelBackground;
                color: $text20;
                font: $fontSizeArial * 0.8 $fontArial;
                line-height: 1.25em;
                padding: 0 $marginStep;
                position: absolute;
                right: 0;
                top: -0.675em;

                .move {cursor: pointer; filter: grayscale(1)}
                .move:hover {filter: none}
                .move::after {
                  background-image: url("/images/sort-arrow.png");
                  background-repeat: no-repeat;
                  background-size: contain;
                  content: "";
                  display:inline-block;
                  height: 1em;
                  margin-left: 0.25em;
                  position: relative;
                  top: 2px;
                  width: 1em;
                }
                .move[data-direction="up"]::after {
                  transform:scaleY(-1);
                }
              }

              & > [data-section-key][data-ordered="first"] > .section-controls .move[data-direction="up"] {display: none}
              & > [data-section-key][data-ordered="last"] > .section-controls .move[data-direction="down"] {display: none}
            }

            .quantity-calc, .base-stats {
              table {
                margin: 0 auto;
                td {
                  text-align: right;
                  width: 7em;

                  &:first-child {
                    padding: 0.25em 1em 0.25em 0;
                  }
                }
                tr.header td, td:first-child {
                  color: $qColor;
                  font: $fontSizeFriz $fontFriz;
                  vertical-align: middle;
                  width: auto;

                  @media screen and (max-width:700px) {
                    font-size: $fontSizeFriz * 0.8;
                  }
                }
              }

              input {
                background-color: $background10;
                border: $bevel * 2 + 1px double;
                border-color: $background40;
                border-radius: $borderRadius;
                box-sizing: border-box;
                color: $text10;
                font: $fontSizeArial $fontArial;
                padding: math.div($marginStep, 2) $marginStep;
                width: 100%;
              }

              .price {display: inline-block; text-align: right}
              .silver {display: inline-block; width: $silverWidth}
            }

            .base-stats .hidden-region-details td:nth-child(3) {display: none}

            .chart-wrapper {
              background-color: $background15;
              border: $bevel solid;
              border-color: $background00 $background10 $background40;
              border-radius: $borderRadius;

              box-sizing: border-box;
              overflow: hidden;
              position: relative;
            }

            .charts-container {
              .chart-wrapper {
                svg {
                  height: 100%;
                  position: absolute;
                  top: $bevel;
                  width: 100%;

                  * {
                    pointer-events: none;
                  }
                }

                line, polyline {
                  stroke-width: 15;
                }

                polyline.price {
                  fill: none;
                  stroke: $priceChart;
                }
                polygon.price {
                  fill: color.adjust($priceChart, $alpha: -0.5);
                }

                polyline.quantity {
                  fill: none;
                  stroke: $quantityChart;
                }
                polygon.quantity {
                  fill: color.adjust($quantityChart, $alpha: -0.5);
                  stroke: $quantityChart;
                }

                line.hover {
                  stroke: $qColor;
                  visibility: hidden;
                }
                &:hover line.hover {
                  visibility: visible;
                }
              }
            }

            .highcharts-container {
              font: $fontSizeArial * 0.8 $fontArial;
            }

            .heat-container {
              .table-wrapper {
                background-color: $background15;
                border: $bevel solid;
                border-color: $background00 $background10 $background40;
                border-radius: $borderRadius;
                font: $fontSizeArial * 0.8 $fontArial;
                max-width: 100%;
                overflow-x: auto;

                &[data-type="quantity"] {margin-top: $marginStep * 2}
              }
              table {border-spacing: 1px 2px; width: 100%;
                td {padding: 2px; text-align: right}
                td:first-child {text-align: left}
              }
            }

            .other-realms-container {
              .other-realms-bars {
                align-items: stretch;
                display: flex;
                flex-flow: column nowrap;
                gap: $marginStep;
                height: 15em;
                margin-bottom: 2 * $marginStep;
                padding: $marginStep;
                position: relative;

                .bar-section {
                  align-items: flex-end;
                  display: flex;
                  flex-flow: row nowrap;
                  gap: 2px;

                  .bar {border: 1px solid transparent}
                  .bar, .link {width: 100%}
                }

                .bar-section.price-bars {flex: 20 0 auto;
                  .bar {border-color: $priceChart; background-color: color.adjust($priceChart, $alpha: -0.5)}
                }
                .bar-section.quantity-bars {flex: 10 0 auto;
                  .bar {border-color: $quantityChart; background-color: color.adjust($quantityChart, $alpha: -0.5)}
                }

                .bar-section.links {
                  position: absolute;
                  top: $marginStep;
                  left: $marginStep;
                  right: $marginStep;
                  bottom: $marginStep;

                  .link {text-align: center; height: 100%;
                    .hover-line {
                      border-left: 2px dotted #808080;
                      display: none;
                      height: 100%;
                    }
                    &[data-shown] .hover-line {display: inline-block}
                    @media (hover: hover) {
                      &:hover .hover-line {
                        border-left: 2px solid $qColor;
                        display: inline-block;
                      }
                    }
                  }
                }
              }

              .check-container {
                text-align: right;
              }

              .list {
                background-color: $background15;
                border: $bevel solid;
                border-color: $background00 $background10 $background40;
                border-radius: $borderRadius;
                max-height: 18em;
                overflow: auto;
                width: 100%;
              }

              .check-container, .list {
                margin: 0 auto;
                max-width: 35em;
              }

              table {
                border-collapse: collapse;
                position: relative;
                width: 100%;

                thead {
                  background-color: $background20;
                  border-radius: $borderRadius $borderRadius 0 0;
                  font: $fontSizeFriz * 0.8 $fontFriz;

                  td {
                    border: $thin solid $background40;
                    border-bottom-color: $background30;
                    border-radius: math.div($borderRadius, 2) math.div($borderRadius, 2) 0 0;
                    cursor: pointer;
                    padding: math.div($marginStep, 2) 0 math.div($marginStep, 2) math.div($marginStep, 2);
                    &:first-child {border-left: 0}
                    &:last-child {border-right: 0}

                    &[data-sort]::after {
                      background-image: url("/images/sort-arrow.png");
                      background-repeat: no-repeat;
                      background-size: contain;
                      content: "";
                      display:inline-block;
                      height: 1em;
                      margin-left: 0.25em;
                      position: relative;
                      top: 2px;
                      width: 1em;
                    }
                    &[data-sort="asc"]::after {
                      transform:scaleY(-1);
                    }

                    @media (hover: hover) {
                      &:hover {
                        background-color: $columnHeaderHoverBackground;
                        box-shadow: inset 0 0 10px 10px $background20;
                      }
                    }
                  }
                }

                tbody {
                  tr {
                    @media (hover: hover) {
                      &:hover {
                        background: linear-gradient(90deg, $rowHoverStart 0%, $rowHoverEnd 20%, $rowHoverEnd 80%, $rowHoverStart 100%);
                      }
                      body.no-row-backgrounds &:hover {background: $rowHoverEnd}
                    }
                  }

                  td {
                    overflow: hidden;
                    padding-left: $marginStep;
                    text-align: right;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    &.text {
                      font: $fontSizeFriz $fontFriz;
                      text-align: left;

                      @media screen and (max-width:700px) {
                        font-size: $fontSizeFriz * 0.8;
                      }
                    }

                    &[data-pop] {
                      font-size: $fontSizeFriz * 0.8;
                      text-align: center;
                    }
                    &[data-pop="1"], &[data-pop="2"] {color: #00bff3}
                    &[data-pop="3"] {color: #19ff19}
                    &[data-pop="4"] {color: #ffd200}
                    &[data-pop="5"], &[data-pop="6"], &[data-pop="7"] {color: #ff2020}

                    &:first-child {
                      // Nonsense to handle the row-wide link.
                      > a {
                        height: 1.25em;
                        left: 0;
                        position: absolute;
                        right: 0;
                        z-index:5;
                      }
                    }
                    &:last-child {
                      padding-right: $marginStep;
                    }

                    .delta-timestamp {
                      font-size: 70%;
                      padding-right: 1em;
                      white-space: nowrap;
                    }
                  }
                }

                &:not([data-with-connected-realms]) tr[data-connected-realm] {
                  display: none;
                }
              }

              .silver {
                display: inline-block; width: $silverWidth;
              }
            }

            .charts-container, .highcharts-container, .other-realms-container, .heat-container {
              .caption {
                font: $fontSizeArial * 0.8 $fontArial;
                padding: 5px 20px 10px;
              }
            }
          }
          &.auctions {
            background-color: $background10;

            flex: 6 1;
            margin-left: $marginStep;
            max-width: 250px;

            @media screen and (max-width:700px) {
              margin-left: 0;
              max-width: unset;
            }

            table {
              border-collapse: collapse;
              width: 100%;
              tr {
                background: linear-gradient(180deg, $background10 0%, $background15 100%);

                &[data-selected] {
                  background: linear-gradient(90deg,
                    color.adjust($rowHighlightColor, $alpha: -0.9) 0%,
                    color.adjust($rowHighlightColor, $alpha: -0.4) 40%,
                    color.adjust($rowHighlightColor, $alpha: -0.4) 60%,
                    color.adjust($rowHighlightColor, $alpha: -0.9) 100%
                  );
                }
                &[data-selected="part"] {
                  background: linear-gradient(90deg,
                    color.adjust($rowHighlightColor, $alpha: -0.9) 0%,
                    color.adjust($rowHighlightColor, $alpha: -0.66) 40%,
                    color.adjust($rowHighlightColor, $alpha: -0.66) 60%,
                    color.adjust($rowHighlightColor, $alpha: -0.9) 100%
                  );
                }

                @media (hover: hover) {
                  &:hover {
                    background: linear-gradient(90deg, $rowHoverStart 0%, $rowHoverEnd 20%, $rowHoverEnd 80%, $rowHoverStart 100%);
                  }
                }

                body.no-row-backgrounds & {background: $background15;
                  &[data-selected] {background: color.adjust($rowHighlightColor, $alpha: -0.4)}
                  &[data-selected="part"] {background: color.adjust($rowHighlightColor, $alpha: -0.66)}
                  @media (hover: hover) {
                    &:hover {background: $rowHoverEnd}
                  }
                }
              }
              td {
                text-align: right;
                width: 50%;

                .silver {display: inline-block; width: $silverWidth}

                a {
                  align-items: center;
                  display: flex;
                  justify-content: flex-end;

                  &:has(> :nth-child(2)) {
                    justify-content: space-between;
                  }
                }

                span.icon {
                  background-size: contain;
                  background-position: center;
                  background-repeat: no-repeat;
                  height: 1em;
                  margin-right: 0.25em;
                  width: 1em;
                }
              }
            }
          }
        }
      }
    }

    &[data-detail-mode] {
      .item {display: flex}
      .search-result {display: none}
    }
  }

  .bottom-bar {
    align-items: center;
    display: flex;
    font-size: 75%;
    justify-content: space-between;
    margin: $marginStep;
    margin-top: 0;

    color: $text30;
    a {
      color: $text30;
    }

    select {
      background-color: $background20;
      border: $bevel solid;
      border-color: $background00 $background00 $background40;
      border-radius: $borderRadius;
      color: $text10;
      font: $fontSizeFriz * 0.8 $fontFriz;
      padding: 0 math.div($marginStep, 2);
    }

    .links {display: flex; gap: 10px; align-items: center}

    .account {
      margin-left: 1em;

      .red-button {@include button-red(); font-size: $fontSizeFriz * 0.8}
      button:not(.red-button) {@include button()}
    }

    .progress {
      align-items: center;
      display: flex;
      flex: 1 1 auto;
      margin: 0 2em;

      &-spinner {
        position: relative;
        height: 1.5em;
        width: 1.5em;

        &-inner {@include SpinThatShit.loader03($color: $highlightBorderColor, $size: 100%, $border-size: 3px)}
      }

      &-bar {
        flex: 1 1 auto;
        height: 50%;
        margin-left: 2em;
        background-color: $background20;
        border: 1px solid $background10;

        &-value {
          background-color: $background30;
          height: 100%;
          width: 75%;
        }
      }

      &:not([data-shown]) > * {display: none}
    }

    .last-updated:not(:empty) {
      margin-left: 2em;
      text-align: right;
    }
  }
}

.main[data-account] {
  .bottom-bar .account {
    display: inline-block !important;
  }

  &[data-account="none"] .logged-in-only {display: none}
  &:not([data-account="none"]) .logged-out-only {display: none}
  &:not([data-account="free"]) .free-only {display: none}
  &:not([data-account="paid"]) .paid-only {display: none}
  &:not([data-account="paid"]) .search-bar .filter > div:after {
    background-color: #000;
    content: '';
    inset: 0;
    opacity: 0.33;
    pointer-events: none;
    position: absolute;
  }
}
.main:not([data-account]) {
  .logged-in-only, .logged-out-only, .free-only, .paid-only {display: none}
}

.scroll-indicator {
  display: flex;
  justify-content: center;
  align-items: center;

  $base: 0.6rem;

  .chevron {
    position: absolute;
    width: $base * 3.5;
    height: $base * 0.8;
    opacity: 0;
    transform: scale(0.3);
    animation: move-chevron 3s ease-out infinite;
  }

  .chevron:first-child {
    animation: move-chevron 3s ease-out 1s infinite;
  }

  .chevron:nth-child(2) {
    animation: move-chevron 3s ease-out 2s infinite;
  }

  .chevron:before,
  .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #aaa;
  }

  .chevron:before {
    left: 0;
    transform: skewY(30deg);
  }

  .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
  }

  @keyframes move-chevron {
    25% {
      opacity: 1;
    }
    33.3% {
      opacity: 1;
      transform: translateY($base * 3.8);
    }
    66.6% {
      opacity: 1;
      transform: translateY($base * 5.2);
    }
    100% {
      opacity: 0;
      transform: translateY($base * 8) scale(0.5);
    }
  }
}

.main, .shatari-tooltip {
  .gold, .silver, .copper {
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: 1em;
  }
  .gold {background-image: url("/images/coin-gold.png");}
  .silver {background-image: url("/images/coin-silver.png");}
  .copper {background-image: url("/images/coin-copper.png");}
}

.shatari-tooltip {
  .gold, .silver, .copper {
    background-position: right center;
  }
  .silver, .copper {
    display: inline-block;
    min-width: 1.5em;
  }
}

.wowhead-tooltip td {
  .shatari-tooltip {
    min-width: 20em;
    td.date {padding-bottom: 0.5em}
    td.price {color: $priceChart}
    td.quantity {color: $quantityChart}
    td:nth-child(2) {text-align: right}
  }

  .battle-pet-tooltip {
    display: flex;
    justify-content: space-between;
    > div:first-child {margin-right: 30px;
      img {
        height: 16px;
        margin-top: 2px;
        vertical-align: text-bottom;
        width: 16px;
      }
    }
    > div:last-child {
      margin-left: 30px;
      text-align: right;
      img {
        height: 39px;
        margin-top: 4px;
        width: 39px;
      }
    }

  }
}
// Reduce the size of the crafting quality pip images.
.wowhead-tooltip[data-type="item"] table td table td img {height: 2em; margin: -0.25em 0}

picture.model-thumbnail img {
  background-color: $background10;
}

body > .wowhead-tooltip {max-width: 320px !important; width: auto !important;
  .wowhead-tooltip-powered {display: none !important}
}

.native-name {
  font-size: 75%;

  &:before {content: ' / '}
}