/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);
  --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);
  --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);
  --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);
  --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);
  --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);
  --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);
  --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand);
  --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected);
  --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);
  --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);
  --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);
  --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);
  --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);
  --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));
  --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  --wcs-switch-dot-size: 0.875rem; /* 14px */
  --wcs-switch-height: var(--wcs-semantic-size-xs);
  --wcs-switch-width: var(--wcs-semantic-size-l);
  --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);
  --wcs-switch-gap: var(--wcs-semantic-spacing-base);
  display: inline-flex;
}

:host([disabled]) .text {
  color: var(--wcs-switch-text-color-disabled);
}
:host([disabled]) .wcs-container {
  cursor: not-allowed;
}

/* Customize the label (the wcs-container) */
.wcs-container {
  position: relative;
  display: flex;
  user-select: none;
  margin-bottom: 0;
  gap: var(--wcs-switch-gap);
}

.wcs-container:has(input:focus-visible) {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);
  outline-offset: var(--wcs-semantic-spacing-small);
  border-radius: var(--wcs-switch-border-radius);
}

/* If the selector focus-visible is not supported by the browser, use focus-within instead */
@supports not selector(.wcs-container:has(input:focus-visible)) {
  .wcs-container:focus-within {
    outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);
    outline-offset: var(--wcs-semantic-spacing-small);
    border-radius: var(--wcs-switch-border-radius);
  }
}
/* Let the user choose the alignment of the checkbox with the label text */
:host([label-alignment=top]) .wcs-container {
  align-items: start;
}

:host([label-alignment=center]) .wcs-container {
  align-items: center;
}

:host([label-alignment=bottom]) .wcs-container {
  align-items: flex-end;
}

/* Hide the browser's default switch */
.wcs-container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.text {
  color: var(--wcs-switch-text-color-default);
  font-weight: var(--wcs-switch-text-font-weight-default);
  line-height: 1.375;
}

.wcs-container:not([aria-disabled]) input:checked ~ .text {
  font-weight: var(--wcs-switch-text-font-weight-selected);
  color: var(--wcs-switch-text-color-selected);
}

.wcs-checkmark::before {
  position: absolute;
  transition: all var(--wcs-switch-transition-duration) ease-out;
}

.wcs-checkmark::before {
  bottom: var(--wcs-switch-padding-vertical);
  left: var(--wcs-switch-padding-horizontal);
  width: var(--wcs-switch-dot-size);
  height: var(--wcs-switch-dot-size);
  content: "";
  border-radius: 50%;
  background-color: var(--wcs-switch-dot-color-default);
}

:host([disabled]:not([checked])) .wcs-checkmark::before {
  background-color: var(--wcs-switch-dot-color-disabled);
}
:host([disabled]:not([checked])) .wcs-checkmark {
  background-color: var(--wcs-switch-background-color-disabled);
}

:host([disabled][checked]) .wcs-checkmark {
  background-color: var(--wcs-switch-background-color-disabled-selected);
}

:host([disabled]) .text {
  color: var(--wcs-switch-text-color-disabled);
}

.wcs-checkmark {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: var(--wcs-switch-width);
  height: var(--wcs-switch-height);
  border-radius: var(--wcs-switch-border-radius);
  background-color: var(--wcs-switch-background-color-initial);
  min-width: 3rem;
  position: relative;
}

.wcs-container:not([aria-disabled]) {
  cursor: pointer;
}

/* When the switch is checked, change the dot to white */
input:not([disabled]):checked + .wcs-checkmark::before,
.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {
  background-color: var(--wcs-switch-dot-color-selected);
}

/* Switch transition */
input:checked + .wcs-checkmark::before {
  transform: translateX(var(--wcs-switch-dot-translate-x));
}

/* When the switch is checked, change background */
input:not([disabled]):checked + .wcs-checkmark {
  background-color: var(--wcs-switch-background-color-final);
}

/* When the switch is checked and hover, change background */
.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {
  background-color: var(--wcs-switch-background-color-hover-selected);
}