///
/// @group Hellodex
/// @access private
/// @author Keith Choison <keith@tize.io>
/// @since 0.1.3
///

@use 'sass:math';
@use 'config/colors';
@use 'functions/color';
@use 'mixins/aria';
@use 'mixins/flex';
@use 'mixins/font';
@use 'mixins/media';
@use 'mixins/position';
@use 'mixins/spacing';
@use 'mixins/transition';

.content {
  @include flex.col-between;
  @include spacing.p-0;
  @include font.primary;
  font-size: 12px;
}

.smol .hideWhenSmol {
  display: none;
}

.showdexIcon {
  @include position.abs-anchor($x: 50%, $y: -60px, $y-prop: bottom);
  width: 264px;
  @include transition.apply(opacity);
  pointer-events: none;
  touch-action: none;

  [data-showdex-scheme='light'] & {
    opacity: 0.76;
  }

  [data-showdex-scheme='dark'] & {
    opacity: 0.84;
  }
}

@keyframes minarex-animation {
  0% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(-50%, 8px);
  }
}

.minarexIcon {
  @include position.abs($r: -94px, $b: -12px, $l: unset);
  width: 296px;
  animation: minarex-animation 4s ease-in infinite alternate;
  @include transition.apply(left, right, opacity);

  &:not(.shady) :global(#sunglasses) {
    display: none;
  }

  .smol & {
    @include position.abs($r: unset, $l: 74%);
  }

  .verySmol & {
    @include position.abs($l: 64%);
    width: 248px;
  }
}

.topContent {
  flex: 1;
  width: 100%;
  @include spacing.px(24px);
}

.banner {
  @include position.rel;
  @include flex.col-center;
  @include spacing.pt(32px);
  text-align: center;
  user-select: none;
  touch-action: none;
}

.authors {
  @include flex.row-center;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.8;
}

.ampersand {
  @include spacing.mx(12px);
}

.authorButton {
  @include font.primary;
  color: inherit;

  .label {
    @include spacing.mr(-0.2em);
    font-size: 12px;
    color: inherit;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
}

.presents {
  @include spacing.mr(-0.2em);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

.extensionName {
  @include spacing.mr(-0.2em);
  font-weight: 700;
  font-size: 40px;
  color: colors.$transparent;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 16px color.alpha(colors.$black, 0.32);
  background: linear-gradient(65deg, #4A9AC7 1%, #F148CC 99%) 0 0 / 100% 100%;
  background-clip: text;
  @include transition.apply(
    (margin-right, 10s),
    (letter-spacing, 10s),
    (background-position, 10s),
    (background-size, 10s),
  );

  &:hover {
    @include spacing.mr(-0.5em);
    letter-spacing: 0.5em;
    background-position: 50% 0;
    background-size: 200% 100%;
  }

  [data-showdex-theme='mina'] & {
    background: linear-gradient(65deg, #E94489 2%, #F8C8C5 98%) 0 0 / 100% 100%;
    background-clip: text;
  }

  [data-showdex-theme='mina'][data-showdex-scheme='light'] & {
    text-shadow: 0 0 16px color.alpha(#FF3A78, 0.32);
  }

  [data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    text-shadow: 0 0 16px color.alpha(#9F1641, 0.32);
  }
}

.extensionVersion {
  @include spacing.mr(-0.15em);
  @include font.mono;
  font-size: 10px;
  letter-spacing: 0.15em;
  // text-indent: 0.15em;
  opacity: 0.64;

  .extensionVersionSuffix {
    opacity: 0.48;
  }
}

.instancesContainer {
  @include position.rel;
}

.instancesContent {
  @include position.rel;
  width: 100%;
  min-height: 324px;
  height: 32vh;
  @include spacing.my(24px);
  border-radius: 16px;
  overflow: hidden;
  @include transition.apply(height, background-color, box-shadow);

  @include media.for-min-height(1000px) {
    height: 48vh;
  }

  &.hiddenDonation {
    height: 52vh;

    @include media.for-min-height(1000px) {
      height: 58vh;
    }

    @include media.for-min-height(1200px) {
      height: 62vh;
    }

    @include media.for-max-height(850px) {
      height: 42vh;
    }

    @include media.for-max-height(750px) {
      height: 36vh;
    }
  }

  [data-showdex-scheme='light'] & {
    background-color: color.alpha(colors.$white, 0.64);
    box-shadow: (
      0 0 1px color.alpha(colors.$black, 0.16),
      0 0 16px color.alpha(colors.$gray-dark, 0.16),
    );
  }

  [data-showdex-theme='mina'][data-showdex-scheme='light'] & {
    background-color: color.alpha(#FFEDF3, 0.64);
    box-shadow: (
      0 0 1px color.alpha(#770629, 0.32),
      0 0 16px color.alpha(#9F1641, 0.16),
    );
  }

  [data-showdex-scheme='dark'] & {
    background-color: color.alpha(colors.$black, 0.48);
    box-shadow: (
      0 0 1px color.alpha(colors.$white, 0.32),
      0 0 16px color.alpha(colors.$black, 0.16),
    );
  }

  [data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    // background-color: color.alpha(#2A151F, 0.64);
    background-color: color.alpha(#734158, 0.48);
  }

  [data-showdex-terrain='glassy'] & {
    backdrop-filter: blur(2px);
  }

  [data-showdex-terrain='glassy'][data-showdex-scheme='light'] & {
    background-color: color.alpha(colors.$white, 0.24);
  }

  [data-showdex-terrain='glassy'][data-showdex-theme='mina'][data-showdex-scheme='light'] & {
    background-color: color.alpha(#FFEDF3, 0.24);
  }

  [data-showdex-terrain='glassy'][data-showdex-scheme='dark'] & {
    background-color: color.alpha(colors.$black, 0.16);
  }

  [data-showdex-terrain='glassy'][data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    background-color: color.alpha(#734158, 0.16);
  }
}

.battleRecord {
  @include position.abs-anchor($x: 50%, $y: -18px, $y-prop: bottom);
}

.scrollableInstances {
  height: 100%;
  @include spacing.p(10px);
}

.instances {
  @include position.rel;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 53px;
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  height: 100%;

  .smol & {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.instanceButton {
  grid-area: span 1 / span 1;
  @include flex.row-center;
  column-gap: 8px;
  border-radius: 12px;
  @include aria.outline($radius: 12px);

  &::before {
    border-radius: 12px;
  }

  &.newInstanceButton {
    @include position.sticky($b: 10px);
  }

  .smol & {
    grid-column: span 2;

    &.smolSplit {
      grid-column: span 1;
    }
  }
}

.battleRecordSpacer {
  grid-area: span 1 / span 3;
  height: 20px;

  .smol & {
    grid-area: span 1 / span 1;
  }
}

.empty {
  @include position.abs-fill;
  @include flex.col-center;
  user-select: none;

  .emptyIcon {
    width: 30px;
    min-width: 30px;
    @include spacing.mb(10px);
    opacity: 0.32;
  }

  .emptyLabel {
    max-width: 216px;
    font-size: 12px;
    letter-spacing: 0.1px;
    text-align: center;
    line-height: 15px;
    opacity: 0.64;

    strong {
      font-weight: 600;
    }
  }

  .divider {
    @include flex.row-center;
    @include spacing.my(16px);

    .dividerLine {
      width: 56px;
      height: 1px;
      opacity: 0.08;
      @include transition.apply(background-color);

      [data-showdex-scheme='light'] & {
        background-color: colors.$black;
      }

      [data-showdex-scheme='dark'] & {
        background-color: colors.$white;
      }
    }

    .dividerLabel {
      @include spacing.px(12px);
      // font-style: italic;
      letter-spacing: 0.1px;
      opacity: 0.32;
    }
  }
}

.honkButton {
  @include spacing.mx-auto;
  @include spacing.mt(4px);
}

button.spectateButton {
  @include font.primary(600); // same font-weight as .emptyLabel strong
  font-size: 12px;
  color: inherit;

  &.disabled {
    opacity: 1;
  }

  .spectateButtonLabel {
    font-size: inherit;
    color: inherit;
  }
}

.donations {
  @include spacing.mx-auto;
  font-size: 10px;
  text-align: center;
  line-height: 14px;
  user-select: none;

  &.withBattleRecord {
    @include spacing.mt(40px);
  }
}

.donateButton {
  @include spacing.mx-auto;
}

.donateFootnote {
  max-width: 250px + 10px;
  @include spacing.mx-auto;
  @include spacing.mt(16px);
  @include spacing.p(6px);
  letter-spacing: 0.05px;
  backdrop-filter: blur(3px);
  border-radius: 6px;
  opacity: 0.64;
  @include transition.apply(opacity);

  &.withTitle {
    opacity: 0.4;
  }

  [data-showdex-terrain='glassy'] & {
    backdrop-filter: none;
  }
}

.footer {
  @include position.rel;
  @include flex.row-between;
  flex: 0 0 73px;
  width: 100%;
  height: 73px;
  @include spacing.px(24px);
  @include spacing.pb(2px);
  backdrop-filter: blur(3px);
  border-top: 2px solid;
  @include transition.apply(background-color, border-top-color);
  z-index: 1;

  .smol & {
    justify-content: center;
  }

  [data-showdex-scheme='light'] & {
    background-color: color.alpha(colors.$white, 0.76);
    border-top-color: color.alpha(colors.$white, 0.16);
  }

  [data-showdex-theme='mina'][data-showdex-scheme='light'] & {
    background-color: color.alpha(#FDF2F6, 0.76);
  }

  [data-showdex-scheme='dark'] & {
    background-color: color.alpha(colors.$black, 0.72);
    border-top-color: color.alpha(colors.$gray-darkest, 0.16);
  }

  [data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    background-color: color.alpha(#7E405D, 0.32);
  }

  [data-showdex-terrain='glassy'] & {
    backdrop-filter: blur(6px);
  }

  [data-showdex-terrain='glassy'][data-showdex-scheme='light'] & {
    background-color: color.alpha(colors.$white, 0.48);
  }

  [data-showdex-terrain='glassy'][data-showdex-theme='mina'][data-showdex-scheme='light'] & {
    background-color: color.alpha(#FDF2F6, 0.48);
  }

  [data-showdex-terrain='glassy'][data-showdex-scheme='dark'] & {
    background-color: color.alpha(colors.$black, 0.48);
  }

  [data-showdex-terrain='glassy'][data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    background-color: color.alpha(#7E405D, 0.24);
  }
}

.links {
  @include flex.row($align: center);
  column-gap: 8px;

  [data-showdex-scheme='light'] & {
    color: colors.$gray-dark;
  }
}

.settingsButton {
  min-width: 68px;
  height: 44px;

  // bad idea, looks weird on non-Retina displays while changing color
  /* .settingsIcon {
    @include transition.apply((transform, 10s));
  }

  &:hover .settingsIcon {
    transform: rotateZ(360deg);
  } */
}

/* .linkSeparator {
  width: 1px;
  height: 28px;
  @include transition.apply(background-color);

  .light & {
    background-color: color.alpha(colors.$gray-darkest, 0.16);
  }

  .dark & {
    background-color: color.alpha(colors.$white, 0.16);
  }
} */

.linkButton {
  width: 56px;
  height: 44px;

  [data-showdex-scheme='light'] & {
    color: color.alpha(colors.$black, 0.76);
  }

  [data-showdex-scheme='dark'] & {
    color: color.alpha(colors.$white, 0.76);
  }

  .settingsVisible & {
    [data-showdex-scheme='light'] & {
      opacity: 0.48;
    }

    [data-showdex-scheme='dark'] & {
      opacity: 0.48;
    }
  }

  i {
    @include spacing.m($t: 4px, $b: 8px);
    font-size: 18px;
  }

  .signpostIcon {
    transform: scale(0.9);
  }

  /* .sparkleIcon {
    transform: scale(0.9);
  }

  .bugIcon {
    transform: rotateZ(90deg);
  }

  .clipboardIcon {
    transform: scale(0.85);
  } */

  &.newInstanceButton {
    color: colors.$transparent;
    background-image: linear-gradient(65deg, colors.$black, #4A9AC7 48%, #B72D99 94%);
    background-position: 0 0;
    background-size: 200% 100%;
    background-clip: text;
    @include transition.apply(background-position, box-shadow);

    &:hover {
      background-position: 100% 0;
    }

    [data-showdex-scheme='dark'] & {
      background-image: linear-gradient(65deg, #7ABCE2, #F148CC 94%);
    }

    [data-showdex-theme='mina'][data-showdex-scheme='light'] & {
      background-image: linear-gradient(65deg, #770629 40%, #E94489 80%);
    }

    [data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
      background-image: linear-gradient(65deg, #F8C8C5 40%, #E94489 80%);
    }
  }
}

.linkButtonLabel {
  // @include spacing.mr(-0.01px);
  letter-spacing: 0.25px;
}

.credits {
  font-size: 10px;
  line-height: 13px;
  text-align: right;
  opacity: 0.56;
  user-select: none;
}

// note: don't use position.absolute-anchor() here cause the BaseButton's
// react-spring will add an inline transform property
.tizeButton {
  @include position.abs($t: -33%, $r: 24px);
  color: inherit;
  opacity: 0.56;
  @include transition.apply(color, opacity);

  [data-showdex-scheme='light'] & {
    color: colors.$gray-dark;
    opacity: 1;
  }

  &:hover {
    color: colors.$blue;
    opacity: 1;
  }
}

.tizeLogo {
  height: 36px;
  min-height: 36px;
}
