.switch_button__wrapper {
  display: flex;
  align-items: center;
}

.switch_button__wrapper_has_error_icon {
  gap: 0.375rem;
}

.switch_button__error_icon.a_input__icon_error {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  > svg {
    width: 1rem;
    height: 1rem;
    display: block;
  }
}

.switch_button {
  --a_switch_button_border_radius: var(--a_border_radius);
  --a_switch_button_bg: var(--a_color_gray_700);
  --a_switch_button_inner_bg: var(--a_color_white);
  --a_switch_button_active_bg: var(--a_color_primary);
  --a_switch_button_inactive_bg: var(--a_color_gray_400);
  --a_switch_hover_focus_bg: var(--a_color_focus);
  --a_switch_button_border_color: var(--a_switch_button_bg);
  --a_switch_button_invalid_color: var(--a_color_danger);
  --a_switch_button_disabled_bg: var(--a_color_gray_500);
  --a_switch_button_disabled_inner_bg: var(--a_color_gray_100);
  --a_switch_button_disabled_border_color: var(--a_color_gray_500);
  margin-left: -0.3125rem;
  position: relative;
}

.switch_button__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  &:checked {
    ~ .switch_button__label {
      &::before {
        --a_switch_button_bg: var(--a_switch_button_active_bg);
        --a_switch_button_border_color: var(--a_switch_button_active_bg);
      }
      &::after {
        left: 1.4375rem;
      }
    }
  }
  &:not(:disabled) {
    &:focus ~ .switch_button__label {
      background-color: var(--a_switch_hover_focus_bg);
    }
    ~ .switch_button__label {
      &:hover {
        background-color: var(--a_switch_hover_focus_bg);
      }
    }
  }
  &:disabled {
    ~ .switch_button__label {
      &::before {
        --a_switch_button_bg: var(--a_switch_button_disabled_bg);
        --a_switch_button_border_color: var(--a_switch_button_disabled_border_color);
      }
      &::after {
        --a_switch_button_inner_bg: var(--a_switch_button_disabled_inner_bg);
      }
    }
  }
}

.switch_button__label {
  padding: .5rem .5rem .5rem 3.4375rem;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  border-radius: var(--a_switch_button_border_radius);
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.3125rem;
    height: 1.5625rem;
    width: 2.5rem;
    border-radius: var(--a_switch_button_border_radius);
    background-color: var(--a_switch_button_bg);
    border: 1px solid var(--a_switch_button_border_color);
  }
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
    background-color: var(--a_switch_button_inner_bg);
    border-radius: var(--a_switch_button_border_radius);
  }
}
.switch_button__label_full {
  display: flex;
  width: 100%;
}

.switch_button_invalid {
  .switch_button__label{
    &::before {
      --a_switch_button_border_color: var(--a_switch_button_invalid_color);
    }
    &::after {
      --a_switch_button_inner_bg: var(--a_switch_button_invalid_color);
    }
  }
  .switch_button__input:checked ~ .switch_button__label::before {
    --a_switch_button_border_color: var(--a_switch_button_invalid_color);
  }
  &.switch_button_undefined .switch_button__label::before {
    --a_switch_button_border_color: var(--a_switch_button_invalid_color);
  }
}

.switch_button_undefined {
  .switch_button__label {
    &::before {
      --a_switch_button_bg: var(--a_switch_button_inactive_bg);
      --a_switch_button_border_color: var(--a_switch_button_inactive_bg);
    }
    &::after {
      left: 0.9375rem;
    }
  }
}
.switch_button_auto {
  display: inline-block;
}