@import (reference) "functions.less";

// Main Switch Button container
.wpbones-switch-button
{
  // Theme
  &.wpbones-switch-button-flat-round input[type="checkbox"] + label
  {
    padding          : 2px;
    width            : 48px;
    height           : 24px;
    vertical-align   : middle;
    background-color : @wpbones-switch-theme-flat-color-off;
    .wpbones-switch-border-radius(60px);
    .wpbones-switch-transition(background 0.4s);
  }

  &.wpbones-switch-button-flat-round.disabled input[type="checkbox"] + label
  {
    background-color : @wpbones-switch-theme-flat-color-disabled;
  }

  &.wpbones-switch-button-flat-round:hover input[type="checkbox"] + label
  {
    background-color : @wpbones-switch-theme-flat-color-on;
  }

  &.wpbones-switch-button-flat-round.disabled:hover input[type="checkbox"] + label
  {
    background-color : @wpbones-switch-theme-flat-color-disabled;
  }

  &.wpbones-switch-button-flat-round input[type="checkbox"] + label:before,
  &.wpbones-switch-button-flat-round input[type="checkbox"] + label:after
  {
    display  : inline-block;
    position : absolute;
    content  : "";
  }

  // inner background
  &.wpbones-switch-button-flat-round input[type="checkbox"] + label:before
  {
    top              : 2px;
    left             : 2px;
    bottom           : 2px;
    right            : 2px;
    background-color : #fff;
    .wpbones-switch-border-radius(60px);
    .wpbones-switch-transition(background 0.4s);
  }

  &.wpbones-switch-button-flat-round input[type="checkbox"] + label:after
  {
    top              : 4px;
    left             : 4px;
    bottom           : 4px;
    width            : 16px;
    background-color : @wpbones-switch-theme-flat-color-off-border;
    .wpbones-switch-border-radius(52px);
    .wpbones-switch-transition(margin 0.4s, background 0.4s;);
  }

  &.wpbones-switch-button-flat-round.disabled input[type="checkbox"] + label:after
  {
    background-color : @wpbones-switch-theme-flat-color-disabled-border;
  }

  &.wpbones-switch-button-flat-round:hover input[type="checkbox"]:checked + label
  {
    background-color : @wpbones-switch-theme-flat-color-off;
  }

  &.wpbones-switch-button-flat-round input[type="checkbox"]:checked + label
  {
    background-color : @wpbones-switch-theme-flat-color-on;
  }

  &.wpbones-switch-button-flat-round.disabled input[type="checkbox"]:checked + label
  {
    background-color : @wpbones-switch-theme-flat-color-disabled;
  }

  &.wpbones-switch-button-flat-round input[type="checkbox"]:checked + label:after
  {
    margin-left      : 24px;
    background-color : @wpbones-switch-theme-flat-color-on-border;
  }

  &.wpbones-switch-button-flat-round.disabled input[type="checkbox"]:checked + label:after
  {
    margin-left      : 24px;
    background-color : @wpbones-switch-theme-flat-color-disabled-border;
  }

  &.wpbones-switch-button-flat-round {
    &.wpbones-switch-mode-select {
      input[type="checkbox"] + label:after,
      &:hover input[type="checkbox"]:checked + label,
      input[type="checkbox"] + label {
        background-color : @wpbones-switch-theme-flat-color-on !important;
      }
    }
  }

}