input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
}

input[data-autocompleted] {
  background-color: transparent !important;
}


/* Other inputs start */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.1s ease-in-out;
}

/* Hide Default Inputs but Keep Accessibility */
input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* General Styles for all elements */
.checkbox-container .checkbox,
.radio-container .radio,
.switch-container .switch {
  border: 1px solid var(--color);
  transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
  box-shadow: 0 0 0 0 transparent inset;
}

/* Hover Effect */
.checkbox-container:hover .checkbox,
.radio-container:hover .radio,
.switch-container:hover .switch {
  box-shadow: 0 0 0 1px var(--color), 0 0 8px rgba(var(--color-rgb, 255, 212, 69), 0.2);
}

/* Checkboxes */
.checkbox-container {
  position: relative;
  margin-bottom: 10px;
}

.checkbox-container .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkbox-container input:hover+.checkbox {
  background: rgba(var(--color-rgb, 255, 212, 69), 0.2);
}

.checkbox-container input:checked+.checkbox {
  background: var(--color);
  border-color: var(--color);
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

.checkbox-container input:checked+.checkbox::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid var(--background);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:focus-visible+.checkbox {
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

/* Radio Buttons */
.radio-container {
  position: relative;
  margin-bottom: 10px;
}

.radio-container .radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radio-container input:hover+.radio {
  background: rgba(var(--color-rgb, 255, 212, 69), 0.1);
}

.radio-container input:checked+.radio::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color);
  border-radius: 50%;
}

.radio-container input:checked+.radio {
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

.radio-container input:focus-visible+.radio {
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

/* Toggle Switch */
.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.switch-container .switch {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  position: relative;
}

.switch-container .switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--color);
  border-radius: 50%;
  transition: all 0.1s ease-in-out;
}

.switch-container input:hover+.switch {
  background: rgba(var(--color-rgb, 255, 212, 69), 0.2);
  box-shadow: 0 0 0 1px var(--color), 0 0 8px rgba(var(--color-rgb, 255, 212, 69), 0.2);
}

.switch-container input:checked+.switch {
  background: var(--color);
  border-color: var(--color);
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

.switch-container input:checked+.switch::after {
  background: var(--background);
  transform: translateX(20px);
}

.switch-container input:focus-visible+.switch {
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset;
}

/* State Variants */
.checkbox-container.error .checkbox,
.radio-container.error .radio,
.switch-container.error .switch {
  --color: var(--error-color);
  --color-rgb: 242, 155, 158;
}

.checkbox-container.success .checkbox,
.radio-container.success .radio,
.switch-container.success .switch {
  --color: var(--success-color);
  --color-rgb: 157, 223, 158;
}

.checkbox-container.warning .checkbox,
.radio-container.warning .radio,
.switch-container.warning .switch {
  --color: var(--warning-color);
  --color-rgb: 248, 218, 133;
}

.checkbox-container.white .checkbox,
.radio-container.white .radio,
.switch-container.white .switch {
  --color: var(--white-color);
  --color-rgb: 255, 255, 255;
}

.checkbox-container.black .checkbox,
.radio-container.black .radio,
.switch-container.black .switch {
  --color: var(--black-color);
  --color-rgb: 51, 51, 51;
}

.checkbox-container.question .checkbox,
.radio-container.question .radio,
.switch-container.question .switch {
  --color: var(--question-color);
  --color-rgb: 51, 51, 51;
}

.checkbox-container.odd .checkbox,
.radio-container.odd .radio,
.switch-container.odd .switch {
  --color: var(--odd-color);
  --color-rgb: 51, 51, 51;
}

.select-component-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
}