.switch {
  --switch-background: var(--sds-color-background-default-secondary);
  --switch-border: var(--sds-color-border-default-default);
  --switch-icon: var(--sds-color-icon-default-secondary);
  --switch-padding: var(--sds-size-space-100);
  --switch-width: calc(var(--sds-size-space-400) + var(--sds-size-space-600));
  --switch-icon-diameter: var(--sds-size-space-400);
  --switch-icon-x: calc(var(--switch-padding));
  --switch-border-radius: var(--sds-size-space-600);
  background: var(--switch-background);
  box-shadow: inset 0 0 0 var(--sds-size-stroke-border) var(--switch-border);
  border-radius: var(--switch-border-radius);
  height: var(--sds-size-space-600);
  padding: var(--switch-padding);
  position: relative;
  width: var(--switch-width);

  > .switch-icon {
    background: var(--switch-icon);
    border-radius: var(--switch-icon-diameter);
    display: block;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(var(--switch-icon-x));
    height: var(--switch-icon-diameter);
    width: var(--switch-icon-diameter);
  }
}

.switch-group {
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-300);
}

.switch-field[data-selected] .switch {
  --switch-background: var(--sds-color-background-brand-default);
  --switch-border: var(--switch-background);
  --switch-icon: var(--sds-color-icon-brand-on-brand);
  --switch-icon-x: calc(
    var(--switch-width) - var(--switch-padding) - var(--switch-icon-diameter)
  );
}

.switch-field[data-focus-visible] .switch::before {
  --offset: calc(var(--sds-size-stroke-border) * 2);
  content: "";
  border-radius: calc(var(--switch-border-radius) + var(--offset));
  bottom: calc(-1 * var(--offset));
  box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
  left: calc(-1 * var(--offset));
  position: absolute;
  right: calc(-1 * var(--offset));
  top: calc(-1 * var(--offset));
}

.switch-field {
  --switch-field-label-color: var(--sds-color-text-default-default);
  --switch-field-description-color: var(--sds-color-text-default-secondary);

  align-items: center;
  column-gap: var(--sds-size-space-300);
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--sds-size-space-100);

  > .switch {
    grid-row-start: 1;
    grid-column-start: 2;
  }

  > .label {
    color: var(--switch-field-label-color);
    grid-row-start: 1;
    grid-column-start: 1;
  }

  > .description {
    color: var(--switch-field-description-color);
    grid-row-start: 2;
    grid-column-start: 1;
  }
}

.switch-field[data-disabled] > .label {
  --switch-field-label-color: var(--sds-color-text-disabled-default);
}

.switch-field[data-disabled] > .description {
  --switch-field-description-color: var(--sds-color-text-disabled-default);
}

.switch-field[data-disabled] {
  .switch,
  &[data-selected] .switch {
    --switch-background: var(--sds-color-background-disabled-default);
    --switch-border: var(--sds-color-border-disabled-default);
    --switch-icon: var(--sds-color-icon-disabled-default);
  }
}
