@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...

// .greatLeagueButton,
// .ultraLeagueButton,
// .masterLeagueButton,
// .customLeagueButton {
//   font-size: 1em;
// }

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

.leagueRadioLabel {
  display: flex;
  align-items: center;
}

.leagueRadio {
  display: none;
}