:host {
  display: inline-block;
}

label {
  position: relative;
  display: block;

  width: 36px;
  height: 20px;

  &:focus-visible {
    outline: 0px;
  }

  &.md {
    width: 43px;
    height: 25px;
    .slider {
      &::before {
        width: 19px;
        height: 19px;
        bottom: 2px;
      }
    }
    input:checked + .slider:before {
      transform: translateX(19px);
    }
  }
  input {
    opacity: 0;
    width: 0;
    height: 0;
    &:checked + .slider {
      background-color: var(--color-surface-action-solid);
      &:before {
        transform: translateX(16px);
        background-color: var(--color-surface-primary);
      }
      &:hover {
        background-color: var(--color-surface-action-solid-hover);
        &::before {
          background-color: var(--color-surface-primary);
        }
      }
    }
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.4s;

    border-radius: var(--border-radius-round);
    background-color: var(--color-surface-primary);
    border: var(--border-width-sm) solid var(--color-border-action);
    &::before {
      border-radius: var(--border-radius-round);
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 1px;
      bottom: 1px;
      background-color: var(--color-surface-action-solid);
      transition: 0.4s;
    }
    &:hover {
      background-color: var(--color-surface-action-solid-hover-light);
      border-color: var(--color-icon-action-hover);
      &::before {
        background-color: var(--color-surface-action-solid-hover);
      }
    }
  }
  &*[disabled] {
    .slider {
      cursor: not-allowed;
      background-color: var(--color-surface-disabled) !important;
      border-color: var(--color-surface-disabled) !important;
      &::before {
        background-color: var(--color-surface-disabled-selected) !important;
      }
    }
  }
  &:focus-visible {
    outline: 0px;

    .slider {
      outline: var(--border-width-sm) solid var(--color-border-focus);
      outline-offset: 1px;
    }
  }
}