.form-control-input {
  margin: var(--zn-spacing-2x-small) 3px 3px;
}

.form-control-input--flush {
  margin: 0;
}

.form-control .form-control__label {
  display: none;
}

.form-control .form-control__help-text {
  display: none;
}

/* Label */
.form-control--has-label .form-control__label {
  display: inline-block;
  color: var(--zn-input-label-color);
  font-weight: var(--zn-font-weight-semibold);
  margin-bottom: var(--zn-spacing-2x-small);
}

.form-control--has-label.form-control--medium .form-control__label {
  font-size: var(--zn-input-label-font-size-medium);
}

.form-control--has-label.form-control--large .form-control__label {
  font-size: var(--zn-input-label-font-size-large);
}

:host([required]) .form-control--has-label .form-control__label::after {
  content: var(--zn-input-required-content);
  margin-inline-start: var(--zn-input-required-content-offset);
  color: var(--zn-input-required-content-color);
}

.form-control--has-label.form-control--radio-group .form-control__label,
.form-control--has-label.form-control--checkbox-group .form-control__label {
  margin-bottom: 0;
}

/* Label with tooltip */
.form-control--has-label.form-control--has-label-tooltip .form-control__label {
  display: inline-flex;
  align-items: center;
  gap: var(--zn-spacing-2x-small);
}

.form-control--has-label.form-control--small .form-control__label {
  font-size: var(--zn-input-label-font-size-small);
}

.form-control--label-tooltip {
  color: var(--zn-color-neutral-700);
  font-size: var(--zn-font-size-small);

  zn-icon {
    --icon-color: var(--zn-color-neutral-700);
    --icon-size: var(--zn-font-size-small);
  }
}

/* Label with optional context note */
.form-control--has-label.form-control--has-context-note {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-control__label-context-note {
  color: var(--zn-input-help-text-color);
  font-size: var(--zn-font-size-small);
  margin-bottom: var(--zn-spacing-2x-small);
}

.form-control--has-label.form-control--has-context-note .form-control-input {
  width: 100%;
}

/* Help text, description, selected content */
.form-control--has-help-text .form-control__help-text,
.radio--has-description .radio__description,
.checkbox--has-description .checkbox__description {
  display: block;
  color: var(--zn-input-help-text-color);
  margin-top: var(--zn-spacing-x-small);
}

.radio--has-description .radio__description,
.checkbox--has-description .checkbox__description {
  margin-top: 0.375rem;
}

.radio--has-selected-content .radio__selected-content,
.checkbox--has-selected-content .checkbox__selected-content {
  display: block;
  margin-top: var(--zn-spacing-small);
}

.form-control--has-help-text.form-control--small .form-control__help-text {
  font-size: var(--zn-input-help-text-font-size-small);
}

.form-control--has-help-text.form-control--medium .form-control__help-text,
.radio--has-description .radio__description,
.checkbox--has-description .checkbox__description {
  font-size: var(--zn-input-help-text-font-size-medium);
}

.form-control--has-help-text.form-control--large .form-control__help-text {
  font-size: var(--zn-input-help-text-font-size-large);
}

.form-control--has-help-text.form-control--radio-group .form-control__help-text,
.form-control--has-help-text.form-control--checkbox-group .form-control__help-text {
  margin-top: var(--zn-spacing-medium);
}

.form-control--has-help-text .switch .form-control__help-text {
  margin-top: var(--zn-spacing-3x-small);
}

.form-control--checkbox-contained-wrapper {
  height: 100%;
}