/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Styling the Radix UI Form component */

/**
 * ROOT: Form Element
 */

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

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

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

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

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

.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
 */

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

.label[for] {
  cursor: pointer;
}

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

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

/**
 * Help and error messages
 */

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

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

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

.success-message {
  color: var(--cpd-color-text-success-primary);
}

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

.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));
}