///
/// @group InstanceButton
/// @access private
/// @author Keith Choison <keith@tize.io>
/// @since 1.0.1
///

@use 'config/colors';
@use 'config/fonts';
@use 'functions/color';
@use 'mixins/aria';
@use 'mixins/font';
@use 'mixins/flex';
@use 'mixins/spacing';
@use 'mixins/position';
@use 'mixins/transition';

div.container {
  position: relative;
  @include flex.row-between;
  @include spacing.padding($x: 16px);
  @include font.apply(fonts.$primary);
  color: inherit;
  border-radius: 12px;
  @include transition.apply(color, background-color, box-shadow);
  user-select: none;

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

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

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

  [data-showdex-theme='mina'][data-showdex-scheme='dark'] & {
    background-color: #3A232D;
  }

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

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

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

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

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

  &::before {
    content: '';
    @include position.absolute-fill;
    border-radius: 12px;
    @include transition.apply(background-color);
    pointer-events: none;
  }

  @include aria.outline($radius: 12px);

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

      &::after {
        @include aria.outline-hover;
      }
    }

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

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

      &::after {
        @include aria.outline-hover($color: colors.$white);
      }
    }
  }

  &:focus {
    [data-showdex-scheme='light'] &::after, [data-showdex-scheme='dark'] &::after {
      @include aria.outline-show;
    }
  }

  &.active {
    [data-showdex-scheme='light'] & {
      box-shadow: (
        0 0 1px color.alpha(color.shade(colors.$blue, 15%), 0.94),
        0 0 3px color.alpha(colors.$blue, 0.48),
      );

      &:hover::before {
        background-color: color.alpha(color.shade(colors.$blue, 15%), 0.12);
      }

      .battleIcon {
        color: color.shade(colors.$blue, 16%);
      }
    }

    [data-showdex-scheme='dark'] & {
      box-shadow: (
        0 0 1px color.alpha(colors.$blue, 0.94),
        0 0 3px color.alpha(colors.$blue, 0.48),
      );

      &:hover::before {
        background-color: color.alpha(colors.$blue, 0.12);
      }

      .battleIcon {
        color: colors.$blue;
      }
    }
  }

  @keyframes container-removing {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    80% {
      transform: scale(0.8);
      opacity: 0.48;
    }

    100% {
      transform: scale(0.48);
      opacity: 0;
    }
  }

  &.removing {
    animation: container-removing ease 7s both;

    &, &:hover {
      [data-showdex-scheme='light'] &::after {
        @include aria.outline-hover($color: color.shade(colors.$red, 16%));
      }

      [data-showdex-scheme='dark'] &::after {
        @include aria.outline-hover($color: colors.$red);
      }
    }

    &:active {
      [data-showdex-scheme='light'] &::after {
        @include aria.outline-show($color: color.shade(colors.$red, 16%));
      }

      [data-showdex-scheme='dark'] &::after {
        @include aria.outline-show($color: colors.$red);
      }
    }
  }
}

.icon {
  @include flex.row-center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  opacity: 0.48;
  @include transition.apply(color, opacity);

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

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

.battleIcon {
  .active & {
    opacity: 0.8;
  }
}

.standaloneIcon {
  i {
    font-size: 22px;
  }

  .saved & {
    opacity: 0.94;
  }
}

.info {
  flex: 1;
  max-width: calc(100% - 26px - 12px);
  @include spacing.ml(8px);

  strong {
    font-weight: 500;
  }
}

.format {
  // max-width: 100%;
  @include spacing.margin($bottom: 2px);
  font-size: 10px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.6;
  overflow: hidden;
}

.honkName {
  // @include font.apply(fonts.$mono);
  font-weight: 500;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.4;
  overflow: hidden;
  @include transition.apply(opacity);

  .saved & {
    opacity: 1;
  }
}

.players {
  @include flex.row-start;
  // max-width: 100%;
}

.username {
  // max-width: 44%;
  @include flex.row($align: center);
  font-weight: 500;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  @include transition.apply(color);
}

.usernameIcon {
  width: 12px;
  min-width: 12px;
  height: 12px;
  min-height: 12px;
  @include spacing.margin($left: 2px);
  color: inherit;
  transform: scale(1.1);
}

.versus {
  @include spacing.padding($x: 5px);
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.6;

  &.noPlayerName {
    @include spacing.padding($left: 0);
  }
}

.morePlayers {
  @include spacing.margin($left: 3px);
  font-weight: 500;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.6;
  overflow: hidden;
}

@keyframes undo-overlay-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.undoOverlay {
  @include position.absolute-fill;
  @include flex.row-center;
  @include font.apply(fonts.$primary, ( font-weight: 500 ));
  font-size: 10px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  border-radius: 12px;
  animation: undo-overlay-fade-in ease 300ms;
  @include transition.apply(color);

  [data-showdex-scheme='light'] & {
    color: color.shade(colors.$red, 16%);
  }

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

.removeButton {
  @include position.absolute($top: 24px, $right: 12px);
  width: 16px;
  height: 16px;
  border-radius: 100px;
  opacity: 0;
  @include transition.apply(top, color, opacity);
  pointer-events: none;

  i {
    font-size: 16px;
  }

  div.container:not(.removing):hover &, div.container:not(.removing):focus & {
    top: 10px;
    opacity: 1;
    pointer-events: all;
  }

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

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

  @include aria.outline(
    $position: null,
    $offset: 3px,
    $radius: 100px,
  );

  &:hover {
    [data-showdex-scheme='light'] & {
      color: color.alpha(color.shade(colors.$red, 12%), 0.94);
      // background-color: color.alpha(colors.$black, 0.12);
    }

    [data-showdex-scheme='dark'] & {
      color: color.alpha(colors.$red, 0.94);
      // background-color: color.alpha(colors.$white, 0.12);
    }

    &::after {
      [data-showdex-scheme='light'] & {
        @include aria.outline-hover;
      }

      [data-showdex-scheme='dark'] & {
        @include aria.outline-hover($color: colors.$white);
      }
    }
  }

  &:focus::after {
    [data-showdex-scheme='light'] &, [data-showdex-scheme='dark'] & {
      @include aria.outline-show;
    }
  }
}
