@import "../../styles/variables.scss";

$switch-height-small: $l-spacing;
$switch-height-large: $xl-spacing;

$switch-width-small: 120px;
$switch-width-large: 240px;

.switch {
  position: relative;
  height: $switch-height-small;
  width: $switch-width-small;
  border-radius: $base-border-radius;

  &.large {
    height: $switch-height-large;
    width: $switch-width-large;
  }

  &.curved {
    border-radius: $switch-height-large;
  }

  &.dark {
    background: rgba(black, 0.25);
  }

  &.nearWhite {
    background: $brand-nearWhite;
  }

  &.transparentWhite {
    background: rgba(white, 0.3);
  }

  &.blue {
    background: $brand-blue;
  }

  &.orange {
    background: $brand-orange;
  }

  &.green {
    background: $brand-green;
  }

  &.red {
    background: $brand-red;
  }

  &.black {
    background: $brand-black;
  }

  &.lightGrey {
    background: $brand-lightGrey;
  }

  &.grey {
    background: $brand-grey;
  }

  &.darkGrey {
    background: $brand-darkGrey;
  }

  &.white {
    background: white;
  }
}

.switchLabel {
  position: relative;
  z-index: 2;
  float: left;
  width: $switch-width-small / 2;
  line-height: $switch-height-small;
  font-size: $body-small-font-size;;
  text-align: center;
  cursor: pointer;
  .large & {
    width: $switch-width-large / 2;
    line-height: $switch-height-large;
    font-size: $body-font-size;
  }
  &.purple {
    color: $brand-purple;
  }

  &.blue {
    color: $brand-blue;
  }

  &.nearWhite {
    color: $brand-nearWhite;
  }

  &.transparentWhite {
    color: rgba(white, 0.3);
  }

  &.orange {
    color: $brand-orange;
  }

  &.green {
    color: $brand-green;
  }

  &.red {
    color: $brand-red;
  }

  &.black {
    color: $brand-black;
  }

  &.lightGrey {
    color: $brand-lightGrey;
  }

  &.grey {
    color: $brand-grey;
  }

  &.darkGrey {
    color: $brand-darkGrey;
  }

  &.white {
    color: white;
  }
}

.switchLabel:active {
  font-weight: bold;
}

.switchLabelOff {
  padding-left: 2px;
  .large & {
    padding-left: 4px;
  }
}

.switchLabelOn {
  padding-right: 2px;

  .large & {
    padding-right: 4px;
  }
}

.switchInput {
  display: none;
}

.switchInput:checked + .switchLabel {
  transition: 0.15s ease-out;

  &.purple {
    color: $brand-purple;
  }

  &.blue {
    color: $brand-blue;
  }

  &.orange {
    color: $brand-orange;
  }

  &.green {
    color: $brand-green;
  }

  &.red {
    color: $brand-red;
  }

  &.black {
    color: $brand-black;
  }

  &.lightGrey {
    color: $brand-lightGrey;
  }

  &.nearWhite {
    color: $brand-nearWhite;
  }

  &.transparentWhite {
    color: rgba(white, 0.3);
  }

  &.grey {
    color: $brand-grey;
  }

  &.darkGrey {
    color: $brand-darkGrey;
  }

  &.white {
    color: white;
  }
}

.switchInput:checked + .switchLabelOn ~ .switchSelection {
  /* Note: left: 50% doesn't transition in WebKit */
  left: $switch-width-small / 2;

  .large & {
    left: $switch-width-large / 2;
  }
}

.switchSelection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: calc((#{$switch-width-small} / 2) - 2px);
  height: calc(#{$switch-height-small} - 4px);
  border-radius: $base-border-radius;
  transition: left 0.15s ease-out;
  .large & {
    top: 2.5px;
    left: 4px;
    width: calc((#{$switch-width-large} / 2) - 4px);
    height: calc(#{$switch-height-large} - 6px);
  }
  .curved & {
    border-radius: 12px;
  }
  &.purple {
    background: $brand-purple;
  }

  &.blue {
    background: $brand-blue;
  }

  &.orange {
    background: $brand-orange;
  }

  &.green {
    background: $brand-green;
  }

  &.red {
    background: $brand-red;
  }

  &.black {
    background: $brand-black;
  }

  &.lightGrey {
    background: $brand-lightGrey;
  }

  &.nearWhite {
    background: $brand-nearWhite;
  }

  &.transparentWhite {
    background: rgba(white, 0.3);
  }

  &.grey {
    background: $brand-grey;
  }

  &.darkGrey {
    background: $brand-darkGrey;
  }

  &.white {
    background: white;
  }
}