
@import "../../scss/theme/config";

$width: 33px !default;
$height: 16px !default;

$width-sm: 28px !default;
$height-sm: 12px !default;

$gap: 2px !default;

.cd-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: $width;
  height: $height;
  cursor: pointer;

  .cd-switch-bg {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: $height/2;
    transition: all .2s linear;
    background-color: #f0f0f0;
    box-shadow: inset 1px 1px 4px 0 rgba(0,0,0,0.30);
    &:after {
      content: '';
      position: absolute;
      top: $gap;
      left: $gap;
      display: inline-block;
      width: $height - 2 * $gap;
      height: $height - 2 * $gap;
      border-radius: 50%;
      background: $colorWhite;
      transition: left .2s linear;
      box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
    }
  }

  input[type="checkbox"] {
    display: none;

    &:checked ~ .cd-switch-bg {
      border-color: $colorLink;
      background: $colorLink;
      &:after {
        left: $width - $height + $gap;
      }
    }
  }
}

.cd-switch-sm {
  width: $width-sm;
  height: $height-sm;

  .cd-switch-bg {
    border-radius: $height-sm/2;

    &:after {
      width: $height-sm - 2 * $gap;
      height: $height-sm - 2 * $gap;
    }
  }

  input[type="checkbox"] {
    &:checked ~ .cd-switch-bg {
      &:after {
        left: $width-sm - $height-sm + $gap;
      }
    }
  }
}
