.switch {
  composes: default-font from '../styles.css';
}

/*
  background sizes
*/

.slider {
  composes: cursor-pointer from '../styles.css';
  composes: z1 from '../styles.css';
  overflow:hidden;
  display: block;
  position:relative;
  margin: 0 .25rem .25rem 0;
}

.sliderSmall{
  composes: slider;
  width: 50px;
  height: 28px;
  border-radius: 14px;
}

.sliderMedium{
  composes: slider;
  width: 75px;
  height: 40px;
  border-radius: 20px;
}

.sliderLarge{
  composes: slider;
  width: 100px;
  height: 55px;
  border-radius: 27.5px;
}

/*
  background color states
*/

.sliderDisabledOffColor {
  composes: bg-silver from '../styles.css';
}

.sliderDisabledOnColor {
  composes: bg-silver from '../styles.css';
}

.sliderEnabledOffColor {
  composes: bg-gray from '../styles.css';
}

/*
  the handle
*/
.handle {
  composes: circle from '../styles.css';
  display:block;
  position:absolute;
  transition:left 0.2s;
}

.handleSmall{
  composes: handle;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
}

.handleMedium{
  composes: handle;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
}

.handleLarge{
  composes: handle;
  top: 5px;
  left: 5px;
  width: 45px;
  height: 45px;
}

/*
  handle color states
*/

.handleDisabledColor{
  composes: bg-gray from '../styles.css';
}

.handleEnabledColor{
  composes: bg-white from '../styles.css';
}

.input {
    display:none;
}

/*
  Distance the button translates left to right
*/

.inputSmall:checked + .handle{
    left:25px;
}
.inputMedium:checked + .handle{
    left:40px;
}
.inputLarge:checked + .handle{
    left:50px;
}

/*
  On color sizes
*/

.onColor{
  composes: bg-primary from '../styles.css';
  position: relative;
  composes: zNeg from '../styles.css';
  left: -48px;
}

.onColorSmall{
  composes: onColor;
  width: 19px;
  height: 28px;
}

.onColorMedium{
  composes: onColor;
  width: 32px;
  height: 40px;
}

.onColorLarge{
  composes: onColor;
  width: 48px;
  height: 55px;
}

.input:checked ~ .onColorSmall{
    width: 100px;
    transition: 0.2s;
}

.input:checked ~ .onColorMedium{
    width: 132px;
    transition: 0.2s;
}

.input:checked ~ .onColorLarge{
    width: 158px;
    transition: 0.2s;
}

.disabled{
  text-decoration: none;
  composes: cursor-not-allowed from '../styles.css';
  pointer-events: none;
}

.hidden{
  display: none;
  visibility: hidden;
}

.inputSmall{
  composes: input;
}

.inputMedium{
  composes: input;
}

.inputLarge{
  composes: input;
}

.inline {
  display: inline-block;
  position: relative;
}
/*
  Label
*/
.label {
  padding: 10px 0 5px 0;
}

.labelFont {
  composes: header-font from '../styles.css';
}

.labelSpacing {
  margin-bottom: 0.35rem;
  padding-right: 1rem;
}

.leftLabel {
  display: inline-block;
  white-space: nowrap;
  vertical-align: text-bottom;
  padding:0 1rem 5px 0;
}

.leftLabelContent {
  display: inline-block;
}