/** EXAMPLE
  <label class="woowgallery-toggle">
    <input type="checkbox" />
    <span data-on="1" data-off="0"></span>
  </label>
**/
.wg-toggle-labels {
  $toggle-enabled-bg: #86d993;
  $toggle-enabled-color: #ffffff;
  $toggle-enabled-tab-bg: #ffffff;

  $toggle-disabled-bg: #de474e;
  $toggle-disabled-color: #ffffff;
  $toggle-disabled-tab-bg: #ffffff;

  position: relative;
  outline: 0;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  margin: 0 0 5px 0;
  box-sizing: border-box;

  span {
    position: relative;
    display: block;
    line-height: 1.3em;
    overflow: hidden;
    border-radius: 0.3em;
    padding: 0.1em 1em;
    border: 1px solid darken($toggle-enabled-tab-bg, 2);
    transition: color 0.3s ease, padding 0.3s ease-in-out, background 0.3s ease-in-out;

    &:before {
      position: relative;
      display: block;
      padding: 0 0.2em;
      font-size: 0.8em;
    }

    &:after {
      position: absolute;
      display: block;
      content: "";
      border-radius: 0.2em;
      width: 1.3em;
      height: 1.3em;
      margin-left: -1.4em;
      top: 0.1em;
      background: $toggle-enabled-tab-bg;
      transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 0.97), background 0.3s ease-in-out;
    }
  }

  input[type="checkbox"] {
    display: none !important;

    // Off
    &:not(:checked) {
      + span {
        background: $toggle-disabled-bg;
        color: $toggle-disabled-color;
        padding-left: 1.6em;
        padding-right: 0.4em;

        &:before {
          content: attr(data-off);
          color: $toggle-disabled-color;
        }

        &:after {
          background: $toggle-disabled-tab-bg;
          left: 1.5em;
        }
      }
    }

    // On
    &:checked {
      + span {
        background: $toggle-enabled-bg;
        color: $toggle-enabled-color;
        padding-left: 0.4em;
        padding-right: 1.6em;

        &:before {
          content: attr(data-on);
        }

        &:after {
          background: $toggle-enabled-tab-bg;
          left: 100%;
        }
      }
    }

    // Disabled
    &:disabled,
    &:disabled + span {
      cursor: not-allowed;
    }
  }
}

.wg-toggle {
  position: relative;
  display: inline-block;
  margin-right: 16px;
  box-sizing: border-box !important;
  color: #6c7781;
  vertical-align: middle;
  font-size: 13px;

  input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: 1;
    border: none;
  }

  .wg-toggle__track {
    content: "";
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
    border: 0.2em solid currentColor;
    width: 4em;
    height: 2em;
    border-radius: 1em;
    transition: 0.2s background ease;

    &::after {
      content: "";
      display: block;
      overflow: hidden;
      position: absolute;
      top: 0.65em;
      right: 0.65em;
      box-sizing: border-box;
      height: 0.65em;
      width: 0.65em;
      border: 0.17em solid currentColor;
      border-radius: 50%;
    }
  }

  .wg-toggle__thumb {
    display: block;
    position: absolute;
    top: 0.45em;
    left: 0.45em;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    transition: 0.1s transform ease;
    background-color: currentColor;
    border: 0.55em solid currentColor;
  }

  &.is-checked,
  input:checked ~ span {
    color: #fff;
  }

  &.is-checked .wg-toggle__track,
  input:checked ~ .wg-toggle__track {
    background-color: #11a0d2;
    border: 1em solid transparent;

    &::after {
      left: 0.88em;
      right: auto;
      width: 0.2em;
      border-radius: 0;
    }
  }

  &.is-checked .wg-toggle__thumb,
  input:checked ~ .wg-toggle__thumb {
    background-color: currentColor;
    border-width: 0;
    transform: translateX(2em);
  }
}

.wg-radio-group {
  $bg: #f7f7f7;
  $fg: #0fa0d2;
  $labelColor: #23282d;
  $borderWidth: 1px;
  $borderColor: #dddddd;

  border: solid $borderWidth #dddddd;
  display: inline-flex;
  margin: 20px;
  border-radius: 20px;
  overflow: hidden;
  background-color: $bg;

  input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
  }

  label {
    color: $labelColor;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 20px;
    margin: 0 !important;
  }

  input[type=radio]:checked + label {
    color: #fff;
    background: $fg;
  }

  label + input[type=radio] + label {
    border-left: solid $borderWidth $borderColor;
  }
}