// Radio Button styles
// ----------------------------------------------

/* SG
# Forms/Toogle


```
  <label class="Text Size-small is-semibold u-rSpace--xl">
    <span class="u-iBlock">TOOLS</span>
    <input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
    <span class="u-iBlock">SQL</span>
  </label>
```
*/

@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';

.CDB-Toogle {
  @include transition(background, 300ms);
  position: relative;
  width: $baseSize * 4;
  height: $baseSize * 2;
  margin: 0 2px;
  border-radius: 50px;
  background: $cTypo4;
}

.CDB-Toogle:before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: $baseSize + 4;
  height: $baseSize + 4;
  border-radius: 50%;
  background: $cWhite;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
  content: '';
}

.CDB-Toogle:checked {
  background: $cMainDark;
}

.CDB-Toogle:checked:before {
  right: 2px;
  left: auto;
}