@import 'styles/Variables.scss';

@each $league, $states in $league-colors {
  $active: map-get($states, 'active');
  $blur: map-get($states, 'blur');
  $hover: map-get($states, 'hover');

  :global(.nes-btn).#{$league}LeagueButton {
    color: map-get($blur, 'color');
    background-color: map-get($blur, 'background-color');
    box-shadow: inset -4px -4px map-get($blur, 'box-shadow-color');
    opacity: 0.6;
    // box-shadow: inset -4px -4px darken(saturate(adjust-hue($primary, -12deg), 7), 9);
    // box-shadow: inset -4px -4px darken(saturate($primary, 14), 18);

    &::before,
    &::after {
      border-color: map-get($blur, 'border-color');
    }

    &:hover,
    &:focus {
      color: map-get($hover, 'color');
      background-color: map-get($hover, 'background-color');
      box-shadow: inset -6px -6px map-get($hover, 'box-shadow-color');
      opacity: 0.75;

      &:active {
        box-shadow: inset 4px 4px map-get($hover, 'box-shadow-color');
      }

      &::before,
      &::after {
        border-color: map-get($hover, 'border-color');
      }
    }

    &.active {
      color: map-get($active, 'color');
      background-color: map-get($active, 'background-color');
      box-shadow: inset -4px -4px map-get($active, 'box-shadow-color');
      opacity: 1;

      &:hover,
      &:focus {
        box-shadow: inset -6px -6px map-get($active, 'box-shadow-color');
      }

      &:active {
        box-shadow: inset 4px 4px map-get($active, 'box-shadow-color');
      }

      &::before,
      &::after {
        border-color: map-get($active, 'border-color');
      }
    }
  }
}

// TODO: above won't generate an scss file automatically...

/* stylelint-disable block-no-empty */
.greatLeagueButton,
.ultraLeagueButton,
.masterLeagueButton,
.customLeagueButton {
  font-size: 1em;
}
/* stylelint-enable block-no-empty */

.wrapper {
  font-size: 0.8em;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
