@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

/* COPIED FROM BULMA SWITCH */

.toggle[type='checkbox'] {
  outline: 0;
  user-select: none;
  position: absolute;
  margin-bottom: 0;
  opacity: 0;
  left: 0;
}
.toggle[type='checkbox'][disabled] {
  cursor: not-allowed;
}
.toggle[type='checkbox'][disabled] + label {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::before {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::after {
  opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label:hover {
  cursor: not-allowed;
}
.toggle[type='checkbox'] + label {
  position: relative;
  display: inline-block;
  padding-left: 3.5rem;
  cursor: pointer;
}
.toggle[type='checkbox'] + label::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 3rem;
  height: 1.5rem;
  border: 0.1rem solid transparent;
  border-radius: 0.75rem;
  background: var(--token-color-palette-neutral-300);
  content: '';
}
.toggle[type='checkbox'] + label::after {
  display: block;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1rem;
  height: 1rem;
  transform: translate3d(0, 0, 0);
  border-radius: 50%;
  background: hsl(0, 0%, 100%);
  transition: all 0.25s size_variables.$easing;
  content: '';
}
.toggle[type='checkbox']:checked + label::before {
  background: var(--token-color-palette-neutral-500);
}
.toggle[type='checkbox']:checked + label::after {
  left: 1.625rem;
}

/* CUSTOM */
.toggle[type='checkbox'] {
  &.is-small {
    + label {
      font-size: size_variables.$size-7;
      padding-left: size_variables.$spacing-32;
      margin: 0 0.25rem;
      &::before {
        top: calc(size_variables.$size-8 / 5);
        height: size_variables.$size-8;
        width: size_variables.$size-8 * 2;
      }
      &::after {
        width: size_variables.$size-8 * 0.9;
        height: size_variables.$size-8 * 0.9;
        transform: translateX(0.05rem);
        left: 0;
        top: calc(size_variables.$size-8 / 4);
      }
    }
    &:checked + label::after {
      left: 0;
      transform: translateX((size_variables.$size-8 * 2) - (size_variables.$size-8 * 0.94));
    }
  }
}
.toggle[type='checkbox'].is-small + label::after {
  will-change: left;
}
.toggle[type='checkbox']:focus + label {
  box-shadow: 0 0 1px var(--token-color-palette-blue-200);
}
.toggle[type='checkbox'].is-success:checked + label::before {
  background: var(--token-color-palette-blue-200);
}

.toggle-label {
  width: 100%;
}
