/* Autofill Fix */
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,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--background) inset !important;
  /* Retain background */
  -webkit-text-fill-color: var(--bold) !important;
  /* Set text color explicitly */
  color: var(--bold) !important;
  /* Ensure text color applies */
  transition: background-color 0s 9999s, color 0s 9999s;
  /* Prevent default transition flash */
}
input[data-autocompleted] {
  background-color: transparent !important;
}

/* Base Styles */
.nice-input-container {
  position: relative;
  width: 100%;
  display: inline-grid;
}

.input-container {
  position: relative;
  width: 100%;
}

/* Base Input Styles */
.input-container input {
  position: relative;
  z-index: 2;
  background: transparent;
  width: 100%;
  padding: 1rem 1rem;
  margin-top: 2rem;
  display: flex;
  font-size: 1rem;
  color: var(--bold);
  border: 1px solid rgba(var(--border-color), 0.5);
  border-radius: 8px;
  background: var(--background);
  outline: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input-container:hover input {
  border: 1px solid rgba(var(--border-color), 1) !important;
}

.input-container input:focus {
  border-color: rgba(var(--border-color), 1) !important;
  box-shadow:
    0 0 0 1px rgba(var(--border-color), 1),
    0 0 0 1px rgba(var(--border-color), 1) inset !important;
}

/* Label Styles */
.input-container label {
  position: absolute;
  top: 67%;
  left: 10px;
  font-size: 1rem;
  color: var(--accent) !important;
  padding: 0 5px;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
  top: 11px;
  font-size: 0.8rem;
  color: var(--bold);
  z-index: 3;
}

/* States - White */
.input-container.white input {
  color: var(--white-color) !important;
}

.input-container.white input:focus {
  box-shadow: 0 0 0 1px var(--white-color), 0 0 0 1px var(--white-color) inset !important;
}

.input-container.white label {
  color: var(--white-color) !important;
}

/* States - Black */
.input-container.black input {
  color: var(--black-color);
}

.input-container.black input:focus {
  box-shadow: 0 0 0 1px var(--black-color), 0 0 0 1px var(--black-color) inset !important;
}

.input-container.black label {
  color: var(--black-color) !important;
}

/* States - Error */
.input-container.error input:focus {
  box-shadow:
    0 0 0 1px rgba(var(--error-color-rgb), 1),
    0 0 0 1px rgba(var(--error-color-rgb), 1) inset !important;
}

.input-container.error label {
  color: var(--error-color) !important;
}

/* States - Success */
.input-container.success input:focus {
  box-shadow:
    0 0 0 1px rgba(var(--success-color-rgb), 1),
    0 0 0 1px rgba(var(--success-color-rgb), 1) inset !important;
}

.input-container.success label {
  color: var(--success-color) !important;
}

/* States - Warning */
.input-container.warning input:focus {
  box-shadow:
    0 0 0 1px rgba(var(--warning-color-rgb), 1),
    0 0 0 1px rgba(var(--warning-color-rgb), 1) inset !important;
}

.input-container.warning label {
  color: var(--warning-color) !important;
}

/* Disabled State */
.input-container.disabled input {
  background: var(--foreground);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
  cursor: not-allowed;
}

.input-container.disabled label {
  color: var(--accent);
}


/* Checkbox, Radio, and Switch States */
.checkbox-container .checkbox,
.radio-container .radio,
.switch-container .switch {
  border: 1px solid var(--color);
  transition: all 0.1s ease-in-out;
}

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

.radio-container input:checked+.radio::after {
  background: var(--color);
}

.switch-container input:checked+.switch {
  background: var(--color);
}

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

.input-icon {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  /* color: rgba(var(--border-color), 1); */
  color: rgba(var(--white-color), 1);
  padding: 1rem;
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  pointer-events: none;
}

/* Dynamic State Modifiers */
.white {
  --border-color: var(--white-color-rgb);
}

.black {
  --border-color: var(--black-color-rgb);
}

.success {
  --border-color: var(--success-color-rgb);
}

.error {
  --border-color: var(--error-color-rgb);
}

.warning {
  --border-color: var(--warning-color-rgb);
}

.odd {
  --border-color: var(--odd-color-rgb);
}

.question {
  --border-color: var(--question-color-rgb);
}