$animation-duration: 150ms;
$animation-function: ease;
$switcher-width: $size-l;
$switcher-height: $size-s;
$switcher-spacing: $spacing-xs;
$switcher-background: $color-controlbase;
$switcher-background--hover: $color-controlbase--hover;
$switcher-background--active: $color-controlbase--active;
$switcher-radius: $radius-rounded;

$switcher-icon-size: $size-xs;
$switcher-icon-color: rgba(255, 255, 255, .1);
$switcher-active-background: $color-primary;
$switcher-active-icon-size: $size-s;
$switcher-active-icon-color: $color-primary-text;

$switcher-group-spacing: $spacing-xxs;

.switcher-group {
  .switcher-container + .switcher-container {
    margin-top: $switcher-group-spacing;
  }
}

.switcher-container {
  display: block;

  label {
    display: flex;
    align-items: center;
    &.reverse {
      flex-direction: row-reverse;
      justify-content: space-between;
      .switcher {
        margin-right: 0;
        margin-left: $switcher-spacing;
      }
    }
  }

  .switcher {
    position: relative;
    width: $switcher-width;
    height: $switcher-height;
    margin-right: $switcher-spacing;
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      &:checked~.switcher-appearance {
        background: $switcher-active-background;
        mtg-svg-icon {
          top: 1px; // TODO add in tokens
          transform: translateX($switcher-width - $switcher-active-icon-size);
          width: $switcher-active-icon-size;
          height: $switcher-active-icon-size;
          color: $switcher-active-icon-color;
        }
      }
    }
    .switcher-appearance {
      display: flex;
      align-items: center;
      width: $switcher-width;
      height: $switcher-height;
      background: $switcher-background;
      border-radius: $switcher-radius;
      transition: background-color $animation-function $animation-duration;
      mtg-svg-icon {
        display: inline-flex;
        transform: translateX(4px); // TODO add in tokens
        width: $switcher-icon-size;
        height: $switcher-icon-size;
        color: $switcher-icon-color;
        transition: transform $animation-function $animation-duration, width $animation-function $animation-duration,
        height $animation-function $animation-duration, color $animation-function $animation-duration;
      }
    }
  }
  &:hover {
    .switcher {
      .switcher-appearance {
        background: $switcher-background--hover;
      }
    }
  }
  &:active {
    .switcher {
      .switcher-appearance {
        background: $switcher-background--active;
      }
    }
  }
}