.mykn-form-control {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  gap: var(--sizes-spacing-xs-v);

  &--direction-h {
    align-items: center;
    flex-direction: row;
    white-space: nowrap;
  }

  &--error {
    --form-border: var(--form-formcontrol-danger-border);
  }

  &--justify-stretch {
    align-items: stretch;

    .mykn-input,
    .mykn-select {
      width: 100%;
    }
  }

  &__required-inidicator {
    text-decoration: none;
  }

  // Cursor not allowed on the form control when any of its children are disabled
  &:has(.mykn-input:disabled),
  &:has(.mykn-select[aria-disabled="true"]) {
    cursor: not-allowed;
  }

  // The inputs themselves should not allow any pointer events (select boxes would open otherwise, for example)
  .mykn-input:disabled,
  .mykn-select[aria-disabled="true"] {
    color: var(--typography-color-muted);
    opacity: 0.4;
    pointer-events: none;
  }
}