:host {
  --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));
  --pine-dimension-025: 2px;
  --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));
  --number-transition-timing: 0.15s ease-out;
  align-items: flex-start;
  color: var(--pine-color-text);
  display: inline-flex;
  flex-flow: row wrap;
  position: relative;
}

:host(.pds-switch--error) {
  color: var(--pine-color-text-message-danger);
}
:host(.pds-switch--error) input,
:host(.pds-switch--error) input:checked,
:host(.pds-switch--error) input:hover:not(:disabled):not(:checked) {
  background-color: var(--pine-color-danger);
}
:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked) {
  outline-color: var(--pine-color-focus-ring-danger);
}
:host(.pds-switch--error) label {
  color: var(--color-text-error);
}

input {
  appearance: none;
  background: var(--pine-color-neutral);
  border: 0;
  border-radius: var(--pine-dimension-sm);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  height: var(--pine-dimension-250);
  margin: 0;
  padding: 0;
  position: relative;
  transition: var(--number-transition-timing);
  transition-property: background, border, color;
  width: var(--pine-dimension-450);
}
input::after {
  background: var(--pine-color-secondary);
  border-radius: var(--pine-border-radius-full);
  box-shadow: var(--pine-box-shadow);
  content: "";
  display: block;
  height: var(--sizing-input-toggle-size);
  inset-block-start: 50%;
  inset-inline-start: var(--pine-dimension-025);
  position: absolute;
  transform: translateY(-50%);
  transition: inset-inline-start var(--number-transition-timing);
  width: var(--sizing-input-toggle-size);
}

label {
  display: flex;
  gap: var(--pine-dimension-150);
}
.pds-switch--error label {
  color: inherit;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pds-switch__message {
  color: var(--pine-color-text-message);
  font: var(--pine-typography-body-sm-medium);
  margin-block-start: var(--pine-dimension-xs);
  margin-inline-start: var(--spacing-message-inline);
  width: 100%;
}
.pds-switch__message + .pds-switch__message {
  margin-block-start: var(--spacing-message-inline);
}

.pds-switch__message--error {
  color: inherit;
  display: flex;
  gap: var(--pine-dimension-2xs);
}
.pds-switch__message--error pds-icon {
  margin-block-start: var(--pine-dimension-025);
}

input:disabled {
  background-color: var(--pine-color-neutral-disabled);
  cursor: not-allowed;
}
input:disabled ~ label {
  cursor: initial;
}
input:disabled:hover::after {
  background-color: var(--pine-color-secondary);
}
input:disabled .pds-switch__message {
  color: initial;
}

input:hover:not(:disabled) {
  background-color: var(--pine-color-neutral-hover);
}

input:focus-visible:not(:disabled) {
  outline: var(--pine-outline-focus);
  outline-offset: var(--pine-border-width);
}

input:checked::after {
  inset-inline-start: calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025));
}

input:checked:not(:disabled) {
  background-color: currentColor;
  color: var(--pine-color-accent);
}
input:checked:not(:disabled):hover {
  border-color: currentColor;
  color: var(--pine-color-accent-hover);
}