@import (optional) url('../../../../components/input/toggle.less');

.wm-app {
  .app-toggle.checkbox {
    padding: 0px;
  label {
    width: var(--wm-toggle-width);
    height: var(--wm-toggle-height);
    overflow: hidden;
    box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
    border-radius: var(--wm-toggle-border-radius);
    position: relative;
    background-color: var(--wm-toggle-background-color, #fff) !important;
    border: var(--wm-toggle-border-width) solid var(--wm-toggle-border-color);
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
  }

  /* Unchecked State */
  label.unchecked {
    overflow: visible !important;
    background-color: var(--wm-toggle-background-color, #ccc) !important;
    width: var(--wm-toggle-width, 40px) !important;
    height: var(--wm-toggle-height, 16px) !important;
    min-height: 0;
  }

  /* Disabled State */
  label.disabled {
    opacity: var(--wm-toggle-disabled-opacity);
    cursor: not-allowed;
  }

  /* Hidden Checkbox Input */
  input[type="checkbox"] {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 6;
    margin: 0;
    cursor: pointer;
  }

  /* Hide Caption */
  .caption {
    visibility: hidden;
  }

  /* Switch handle */
  .switch,
  img.switch {
    position: absolute;
    display: block;
    top: 6px;
    left: 8px;
    height: var(--wm-toggle-handle-height);
    width: var(--wm-toggle-handle-width);
    background-color: var(--wm-toggle-handle-color);
    border-radius: var(--wm-toggle-handle-radius);
    z-index: 1;
    transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-property: left, right;
    transition-delay: 0s, .08s;
    text-align: center;
    border-style: solid;
    box-sizing: border-box;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Checked State move handle */
  input[type="checkbox"]:checked ~ .switch {
    right: 0;
    left: auto;
    margin-right: 6px;
    transition-delay: .08s, 0s;
    background-color: var(--wm-toggle-handle-color);
    transform: scale(1.6) !important;
  }

  input[type="checkbox"]:checked ~ label {
    background-color: var(--wm-toggle-background-color);
  }

  label {
    width: var(--wm-toggle-width);
    height: var(--wm-toggle-height);
  }
}
}