// --------------------------------------------
// Switch Base Mixin --------------------------
// --------------------------------------------
@mixin switch-base($height: $switch-height) {
  height: $height;
  position: relative;
  display: inline-block;
  min-width: $height * 2;
  vertical-align: middle;
  line-height: $height - 1;

  input {
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;

    &:focus + .c-switch-handle {
      border-color: $switch-on-bg;
      box-shadow: 0 0 0 .1rem rgba($switch-on-bg, .2);
    }

    &:checked + .c-switch-handle {
      background: $switch-on-bg;
      border-color: $switch-on-bg;

      &::before {
        left: $height;
      }

      + .c-switch-label::after {
        opacity: 0;
        display: none;
      }
    }

    &:disabled + .c-switch-handle {
      box-shadow: none;
      cursor: not-allowed;
      background: $switch-disabled;
      border-color: $switch-disabled;

      &::before {
        box-shadow: none;
        background: $switch-handle-disabled;
      }
    }

    &:checked[disabled] + .c-switch-handle {
      cursor: not-allowed;
      background: $switch-disabled-checked-bg;
      border-color: $switch-disabled-checked-bg;

      &::before {
        box-shadow: none;
        background: $switch-handle-disabled;
      }
    }
  }

  &-handle {
    left: 0;
    height: $height;
    cursor: pointer;
    width: $height * 2;
    position: absolute;
    display: inline-block;
    box-shadow: $switch-shadow;
    background: $switch-off-bg;
    background-clip: padding-box;
    border-radius: $switch-radius;
    border: $global-border-size $global-border-color;
    transition: background .2s, border .2s, box-shadow .2s, color .2s;

    &::before {
      top: 0;
      left: 0;
      content: "";
      display: block;
      position: absolute;
      width: $height - 2;
      height: $height - 2;
      background: $color-white;
      border-radius: $switch-radius;
      box-shadow: 1px 1px 4px 0 rgba(33, 37, 41, .4);
      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
    }
  }

  &-label {
    cursor: pointer;
    font-size: $switch-font-size;
    line-height: $switch-font-size + 4;
    padding-left: $height * 2 + $space-sm;

    &:empty {
      padding-left: $space-0;
    }
  }

  &-disabled {
    cursor: not-allowed;
    color: $switch-disabled-checked-bg;

    .c-switch-label {
      cursor: not-allowed;
    }

    .c-switch input {
      cursor: not-allowed;

      &:checked + .c-switch-handle {
        box-shadow: none;
        cursor: not-allowed;
        background: $switch-disabled-checked-bg;
        border-color: $switch-disabled-checked-bg;
      }
    }

    .c-switch-handle {
      cursor: not-allowed;
      background: $switch-disabled;
      border-color: $switch-disabled;
    }
  }
}


// --------------------------------------------
// Switch Size Mixin --------------------------
// --------------------------------------------
@mixin switch-size($height: $switch-height) {
  min-height: $height;
  min-width: $height * 2;

  input {
    &:checked + .c-switch-handle::before {
      left: $height;
    }
  }

  .c-switch-handle {
    height: $height;
    width: $height * 2;

    &::before {
      width: $height - 2;
      height: $height - 2;
    }
  }

  .c-switch-label {
    padding-left: $height * 2 + $space-sm;
    line-height: $height;
    font-size: $height - 4;

    &:empty {
      padding-left: $space-0;
    }
  }

  @if ($height >= 24px) {
    .c-switch-label {
      &::after,
      &::before {
        line-height: 1;
        top: 11px;
        font-size: 10px;
        height: inherit;
        cursor: pointer;
        font-weight: 600;
        box-shadow: none;
        position: absolute;
        border-radius: inherit;
        text-transform: uppercase;
        transition: 0.25s ease-out;
      }

      &::before {
        opacity: 1;
        left: $space-sm;
        content: attr(data-on);
        color: $switch-label-on;
      }

      &::after {
        opacity: 1;
        left: 36px;
        content: attr(data-off);
        color: $switch-label-off;
      }
    }
  }
}


// --------------------------------------------
// Switch Color Mixin -------------------------
// --------------------------------------------
@mixin switch-color($color: black) {
  input {
    &:focus + .c-switch-handle {
      border-color: $color;
      box-shadow: 0 0 0 .1rem rgba($color, .2);
    }

    &:checked + .c-switch-handle {
      background: $color;
      border-color: $color;
    }
  }
}