.form-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--form-control-gap);
}
.form-control label:has(input),
.form-control label:has(select),
.form-control label:has(textarea) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--form-control-gap);
}
.form-control input[type=button],
.form-control input[type=reset],
.form-control input[type=submit],
.form-control input[type=file],
.form-control input[type=number],
.form-control input[type=color],
.form-control input[type=date],
.form-control input[type=datetime-local],
.form-control input[type=email],
.form-control input[type=month],
.form-control input[type=password],
.form-control input[type=search],
.form-control input[type=tel],
.form-control input[type=text],
.form-control input[type=time],
.form-control input[type=url],
.form-control input[type=week],
.form-control input[type=image],
.form-control select {
  height: var(--input-height);
}
.form-control input[type=date],
.form-control input[type=datetime-local],
.form-control input[type=email],
.form-control input[type=month],
.form-control input[type=password],
.form-control input[type=search],
.form-control input[type=tel],
.form-control input[type=text],
.form-control input[type=time],
.form-control input[type=url],
.form-control input[type=week],
.form-control select {
  width: 100%;
  background-color: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-x);
}
.form-control input[type=date]:focus,
.form-control input[type=datetime-local]:focus,
.form-control input[type=email]:focus,
.form-control input[type=month]:focus,
.form-control input[type=password]:focus,
.form-control input[type=search]:focus,
.form-control input[type=tel]:focus,
.form-control input[type=text]:focus,
.form-control input[type=time]:focus,
.form-control input[type=url]:focus,
.form-control input[type=week]:focus,
.form-control select:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=button],
.form-control input[type=reset],
.form-control input[type=submit] {
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-x);
}
.form-control input[type=button]:focus,
.form-control input[type=reset]:focus,
.form-control input[type=submit]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=image] {
  border-radius: var(--input-border-radius);
  overflow: clip;
}
.form-control input[type=image]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=range] {
  width: 100%;
}
.form-control input[type=range],
.form-control input[type=radio],
.form-control input[type=checkbox] {
  accent-color: var(--input-accent-color);
}
.form-control input[type=range]:focus,
.form-control input[type=radio]:focus,
.form-control input[type=checkbox]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=file] {
  width: 100%;
  background-color: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
}
.form-control input[type=file]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=file]::file-selector-button {
  background-color: var(--input-accent-color);
  color: var(--input-content-on-accent-color);
  padding-inline: var(--input-padding-x);
  padding-block: var(--input-padding-y);
  margin-right: var(--input-padding-x);
  height: 100%;
  border: none;
  display: inline-flex;
  align-items: center;
}
.form-control input[type=file]::-webkit-file-upload-button {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.form-control input[type=number] {
  width: 100%;
  background-color: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  padding-block: var(--input-padding-y);
  padding-left: var(--input-padding-x);
}
.form-control input[type=number]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--input-icon-select-arrow-svg);
  background-repeat: no-repeat;
  background-position: right var(--input-padding-x) center;
  background-size: 1.5rem;
}
.form-control select:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control textarea {
  height: auto;
  resize: vertical;
  width: 100%;
  background-color: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  padding-block: var(--textarea-padding-y);
  padding-inline: var(--textarea-padding-x);
}
.form-control textarea:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=color] {
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  border-radius: var(--input-border-radius);
}
.form-control input[type=color]:focus {
  outline: none;
  border-color: var(--input-border-focus-color);
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input[type=checkbox][role=switch] {
  appearance: none;
  -webkit-appearance: none;
  width: calc(var(--input-switch-height) * 2);
  height: var(--input-switch-height);
  border-radius: 50rem;
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  background-color: var(--input-background-color);
  background-image: var(--input-icon-switch-svg-before);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: var(--input-switch-height);
  transition: background-color 0.1s, background-position 0.1s ease;
}
.form-control input[type=checkbox][role=switch]:checked {
  background-color: var(--input-accent-color);
  border-color: var(--input-accent-color);
  background-position: right center;
  background-image: var(--input-icon-switch-svg-after);
}
.form-control input[type=checkbox][role=switch]:focus-visible {
  outline: none;
  box-shadow: var(--input-box-shadow-focus);
}
.form-control input:disabled,
.form-control select:disabled,
.form-control textarea:disabled {
  color: var(--input-disabled-color);
  -webkit-text-fill-color: var(--input-disabled-color);
  background-color: var(--input-disabled-background-color);
  opacity: 0.5;
}

.validated input[type=checkbox][role=switch][aria-invalid=true], .validated input[type=checkbox][role=switch]:invalid {
  background-color: var(--input-accent-color-invalid);
  border-color: var(--input-accent-color-invalid);
}
.validated input[type=file][aria-invalid=true]::file-selector-button, .validated input[type=file]:invalid::file-selector-button {
  background-color: var(--input-accent-color-invalid);
  color: var(--input-content-on-accent-color-invalid);
}
.validated input[aria-invalid=true], .validated input:invalid,
.validated select[aria-invalid=true],
.validated select:invalid,
.validated textarea[aria-invalid=true],
.validated textarea:invalid {
  accent-color: var(--input-accent-color-invalid);
  border-color: var(--input-accent-color-invalid);
  box-shadow: var(--input-box-shadow-focus-invalid);
}
.validated input[aria-invalid=true]:focus, .validated input:invalid:focus,
.validated select[aria-invalid=true]:focus,
.validated select:invalid:focus,
.validated textarea[aria-invalid=true]:focus,
.validated textarea:invalid:focus {
  accent-color: var(--input-accent-color-invalid);
  border-color: var(--input-accent-color-invalid);
  box-shadow: var(--input-box-shadow-focus-invalid);
}

.form-control-sm input[type=button],
.form-control-sm input[type=reset],
.form-control-sm input[type=submit],
.form-control-sm input[type=file],
.form-control-sm input[type=number],
.form-control-sm input[type=color],
.form-control-sm input[type=date],
.form-control-sm input[type=datetime-local],
.form-control-sm input[type=email],
.form-control-sm input[type=month],
.form-control-sm input[type=password],
.form-control-sm input[type=search],
.form-control-sm input[type=tel],
.form-control-sm input[type=text],
.form-control-sm input[type=time],
.form-control-sm input[type=url],
.form-control-sm input[type=week],
.form-control-sm input[type=image],
.form-control-sm select {
  height: var(--input-height-sm);
}
.form-control-sm input[type=checkbox][role=switch] {
  width: calc(var(--input-switch-height-sm) * 2);
  height: var(--input-switch-height-sm);
  background-size: var(--input-switch-height-sm);
}
.form-control-sm input[type=range],
.form-control-sm input[type=checkbox]:not([role=switch]),
.form-control-sm input[type=radio] {
  zoom: 0.9;
}

.form-control-md input[type=button],
.form-control-md input[type=reset],
.form-control-md input[type=submit],
.form-control-md input[type=file],
.form-control-md input[type=number],
.form-control-md input[type=color],
.form-control-md input[type=date],
.form-control-md input[type=datetime-local],
.form-control-md input[type=email],
.form-control-md input[type=month],
.form-control-md input[type=password],
.form-control-md input[type=search],
.form-control-md input[type=tel],
.form-control-md input[type=text],
.form-control-md input[type=time],
.form-control-md input[type=url],
.form-control-md input[type=week],
.form-control-md input[type=image],
.form-control-md select {
  height: var(--input-height-md);
}
.form-control-md input[type=checkbox][role=switch] {
  width: calc(var(--input-switch-height-md) * 2);
  height: var(--input-switch-height-md);
  background-size: var(--input-switch-height-md);
}

.form-control-lg input[type=button],
.form-control-lg input[type=reset],
.form-control-lg input[type=submit],
.form-control-lg input[type=file],
.form-control-lg input[type=number],
.form-control-lg input[type=color],
.form-control-lg input[type=date],
.form-control-lg input[type=datetime-local],
.form-control-lg input[type=email],
.form-control-lg input[type=month],
.form-control-lg input[type=password],
.form-control-lg input[type=search],
.form-control-lg input[type=tel],
.form-control-lg input[type=text],
.form-control-lg input[type=time],
.form-control-lg input[type=url],
.form-control-lg input[type=week],
.form-control-lg input[type=image],
.form-control-lg select {
  height: var(--input-height-lg);
}
.form-control-lg input[type=checkbox][role=switch] {
  width: calc(var(--input-switch-height-lg) * 2);
  height: var(--input-switch-height-lg);
  background-size: var(--input-switch-height-lg);
}
.form-control-lg input[type=range],
.form-control-lg input[type=checkbox]:not([role=switch]),
.form-control-lg input[type=radio] {
  zoom: 1.5;
}