@use '../../../../../styles' as *;

$medium-size: 'medium';
$large-size: 'large';

$light-tone: 'light';
$dark-tone: 'dark';


$size-config: (
        medium: (
                width: 36,
                height: 20,
                radius: 16,
        ),
        large: (
                width: 44,
                height: 24,
                radius: 20,
        ),
);

$tone-config: (
        light: (
                main: $gray-200,
                hover: $gray-300,
        ),
        dark: (
                main: $gray-300,
                hover: $gray-400,
        ),
);

@mixin insertSwitcherField($size: $medium-size, $tone: $light-tone) {
  $size: if(type-of($size) == 'string', unquote($size), $size);
  $tone: if(type-of($tone) == 'string', unquote($tone), $tone);
  $size-settings: map-get($size-config, $size);
  $tone-settings: map-get($tone-config, $tone);

  .switcherField {
    width: #{map-get($size-settings, width)}px;
    height: #{map-get($size-settings, height)}px;

    display: flex;
    justify-content: left;

    border-radius: 12px;
    padding: 2px;
    background-color: map-get($tone-settings, main);

    &:after {
      flex: none;
      content: '';
      width: #{map-get($size-settings, radius)}px;
      height: #{map-get($size-settings, radius)}px;
      border-radius: 50%;
      box-shadow: 0 1px 2px 0 #1018280F, 0 1px 3px 0 #1018281A;
      background-color: $white;
    }

    &:hover {
      background-color: map-get($tone-settings, hover);
    }

    &:focus {
      box-shadow: 0 0 0 4px $gray-100;
    }

    &.active {
      justify-content: right;
      background-color: $media-500;

      &:hover {
        background-color: $media-600;
      }
    }

    &:disabled {
      cursor: default;
      background-color: map-get($tone-settings, main);

      &:hover {
        background-color: map-get($tone-settings, main);
      }
    }

    @content;
  }
}