//@use '../base/colors' as *;

:root {
  --cbp-switch-label-width: 10.5rem;
}

.cbp-toggle__wrapper {
  display: flex;
  align-items: center;
  margin-bottom: var(--cbp-space-4x);

  & > span {
    margin-left: var(--cbp-space-2x);
  }

  &:first-child {
    margin-top: var(--cbp-space-5x);
  }
}

.cbp-toggle__label {
  width: var(--cbp-switch-label-width); // Document that this width or margin should be determined at time of development
}

.cbp-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.cbp-toggle > input { 
  opacity: 0;
  width: 0;
  height: 0;

  &:checked + .slider {
    background-color: var(--cbp-color-interactive-selected-dark);
  }

  &:focus + .slider {
    background-color: var(--cbp-color-interactive-focus-dark);
    box-shadow: none;
    outline: var(--cbp-border-size-md) solid var(--cbp-color-white);
    outline-offset: calc(var(cbp-space-1x) * -1);
  }

  &:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
  }

  &:focus:hover + .slider:before {
    background-color: var(--cbp-color-white);
  }

  &:disabled + .slider {
    background-color: var(--cbp-color-interactive-disabled-dark);
  }

  &:disabled:hover + .slider {
    background-color: var(--cbp-color-interactive-secondary-dark);
  }

  &:disabled:focus + .slider {
    background-color: var(--cbp-color-interactive-focus-dark);
  }

  &:checked:disabled:focus + .slider {
    background-color: var(--cbp-color-interactive-selected-dark);
  }
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cbp-color-interactive-secondary-light);
  border-radius: var(--cbp-border-radius-pill);
  cursor: pointer;

  &:before {
    position: absolute;
    content: "";
    border-radius: var(--cbp-border-radius-circle);
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--cbp-color-white);
    border: 4px solid var(--cbp-color-white);
    -webkit-transition: var(--cbp-motion-duration-shortest);
    transition: var(--cbp-motion-duration-shortest);
  }

  &:hover {
    background-color: var(--cbp-color-interactive-secondary-dark);

    &::before {
      background-color: transparent;
    }
  }
}

.cbp-toggle i:first-child {
  display: none;
  position: absolute;
  left: 8px;
  top: 7px;
}

.cbp-toggle i:last-child {
  display: inline-block;
  position: absolute;
  right: 8px;
  top: 7px;
}

.demo-toggle > .slider {
  background-color: #4F7942; // TODO - need token
}