/* Copyright 2024, 2025 New Vector Ltd.
 * Copyright 2023, 2024 The Matrix.cpd-form-org Foundation C.cpd-form-I.cpd-form-C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

/**
 * ROOT: Form Element
 */

.cpd-form-root {
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-5x);
}

/**
 * FIELD: Wrapper around label, control and message
 */

.cpd-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-1x);
}

.cpd-form-inline-field {
  display: flex;
  flex-direction: row;
  gap: var(--cpd-space-5x);
}

.cpd-form-inline-field-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cpd-form-inline-field-control {
  /* The control should have the same height as the label */
  block-size: calc(
    var(--cpd-font-size-body-md) *
    var(--cpd-font-line-height-regular)
  );

  /* Align the control in the middle of the label */
  display: flex;
  align-items: center;
}

/**
 * LABEL
 */

.cpd-form-label {
  font: var(--cpd-font-body-md-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

.cpd-form-label[for] {
  cursor: pointer;
}

.cpd-form-label[data-invalid] {
  color: var(--cpd-color-text-critical-primary);
}

.cpd-form-inline-field-body .cpd-form-label {
  /* When the label is inline, it should be using regular font weight, not medium */
  font: var(--cpd-font-body-md-regular);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
.cpd-form-label:has(~ * input[disabled]),
.cpd-form-label:has(~ input[disabled]),
.cpd-form-inline-field-control:has(input[disabled])
  ~ .cpd-form-inline-field-body
  .cpd-form-label {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

/**
 * Help and error messages
 */

.cpd-form-message {
  font: var(--cpd-font-body-sm-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  margin-block-start: var(--cpd-space-1x);
}

.cpd-form-help-message {
  color: var(--cpd-color-text-secondary);
}

.cpd-form-error-message {
  color: var(--cpd-color-text-critical-primary);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
input[disabled] ~ .cpd-form-message,
*:has(input[disabled]) ~ .cpd-form-message,
.cpd-form-inline-field-control:has(input[disabled])
  ~ .cpd-form-inline-field-body
  .cpd-form-message {
  color: var(--cpd-color-text-disabled);
}

.cpd-form-message > svg {
  display: inline-block;
  vertical-align: bottom;
  margin-inline-end: var(--cpd-space-2x);

  /* Calculate the size of the icon based on the font size and line height */
  block-size: calc(1em * var(--cpd-font-line-height-regular));
  inline-size: calc(1em * var(--cpd-font-line-height-regular));
}
