// Global variables for overriding behavior in individual CSS files
$toggle_width: 56px;
$toggle_height: 21px;
$toggle_horizontal_padding: 10px;
$toggle_vertical_padding: 2px;
$toggle_circle_diameter: 13px;
$toggle_no_background: color('gray');
$toggle_yes_background: color('primary');

.switch {
  display: inline-block;
  position: relative;
  width: $toggle_width;
  height: $toggle_height;
  overflow: hidden;
  padding: $toggle_vertical_padding 5px;
  border-radius: 10px;
  cursor: pointer;
  color: $color-white !important;
  background: $toggle_no_background;
  font-size: $font-size-100;
  text-transform: uppercase;
  line-height: $toggle_height - $toggle_vertical_padding;

  &:after {
    position: absolute;
    z-index: 1;
    width: $toggle_width - ($toggle_circle_diameter);
  }

  // Circle "knob"
  &:not(.disabled):before {
    content: "";
    position: relative;
    z-index: 2;
    float: right;
    display: block;
    width: $toggle_circle_diameter;
    height: $toggle_circle_diameter;
    margin-top: 2px;
    border-radius: 50%;
    background-color: color('white');
  }
  &.switch-no, &.switch-off {
    text-align: left;
    padding-left: $toggle_horizontal_padding;
    background: $toggle_no_background;

    &:before {
      float: right;
    }
    &:after {
      top: $toggle_vertical_padding;
      left: $toggle_circle_diameter;
      padding-right: $toggle_horizontal_padding;
      background: $toggle_no_background;
    }
  }
  &.switch-yes, &.switch-on {
    text-align: right;
    padding-right: $toggle_horizontal_padding;
    background: $toggle_yes_background;

    &:before {
      float: left;
    }
    &:after {
      top: $toggle_vertical_padding;
      right: $toggle_circle_diameter;
      padding-left: $toggle_horizontal_padding;
      background: $toggle_yes_background;
    }
  }
  &:link,
  &:hover {
    color: color('white');
    text-decoration: none;
  }
  &.disabled {
    font-style: inherit;
  }

  &.switch-yes:after {
    content: "Yes";
  }
  &.switch-no:after {
    content: "No";
  }
  &.switch-on:after {
    content: "On";
  }
  &.switch-off:after {
    content: "Off";
  }

}