@import '../../styles/vars';

.component {
  @extend %clearfix;

  height: 24px;
}

.label {
  display: flex;
  align-items: center;
}

.toggle-input {
  position: absolute;
  opacity: 0;

  &:checked + .toggle {
    background-color: var(--green200);
    &:before {
      background-color: var(--green500);
      transform: translateX(14px);
    }
  }

  &:focus + .toggle:before {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 var(--ltblue500);
  }
}

/* track styles */
.toggle {
    display: inline-block;
    position: relative;
    background-color: var(--grey300);
    border-radius: 7px;
    cursor: pointer;
    height: 14px;
    margin-left: auto;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    width: 34px;

  /* knob styles */
  &:before {
    @extend %z-depth-1;

    content: '';
    position: absolute;
    background-color: var(--grey500);
    border-radius: 100%;
    height: 20px;
    left: 0;
    top: -3px;
    width: 20px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  }
}

.disabled {
  opacity: 0.6;

  & .icon {
    color: var(--black38);
  }

  & .toggle {
    cursor: default;
  }
}
