form {
    @apply cfa-stack;
}

.fieldset-group {
    @apply border-none p-0 m-0 min-w-0;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="url"],
textarea,
select {
    @apply border border-border-default rounded px-cfa-sm py-cfa-sm bg-white text-text-default;

    &:focus-visible {
        @apply outline-2 outline-offset-2 outline-focus;
    }

    &:disabled {
        @apply bg-background-disabled text-text-disabled border-border-disabled cursor-not-allowed;
    }
}

input[type="text"] {
  height: 40px;
  padding: 8px;
}

.form_item {
    @apply flex items-center;
    label { margin-left: var(--spacing-cfa-sm); }
    .field_with_errors { display: inline-flex; }
}

.form_item--bordered {
    --border-width: 2px;
    @apply relative border-border-default rounded-lg bg-white;
    border-width: var(--border-width);
    padding: calc(var(--spacing-cfa-med) - var(--border-width) + 2px);

    label {
        cursor: pointer;
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            cursor: pointer;
            border-radius: inherit;
        }
    }

    &:has(input:checked) {
        background-color: var(--color-primary-hover);
        --border-width: 4px;
    }

    &:has(input:disabled) {
        border-color: var(--color-border-disabled);
        cursor: not-allowed;
        label { cursor: not-allowed; }
    }

    &.form_item--warning {
        border-color: var(--color-border-warning);
    }

    &:has(.cfa-radio--error) {
        border-color: var(--color-border-error);
    }
}

/* the css rules below are to remove the spin button from the input currency component */
.currency-field input[type="number"]::-webkit-outer-spin-button,
.currency-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.currency-field input[type="number"] {
  -moz-appearance: textfield;
}

.form_errors,
.form_warning {
    @apply mt-cfa-sm;
}
/* Checkbox */
.cfa-checkbox {
  @apply appearance-none border border-border-default bg-white cursor-pointer flex-shrink-0;
  box-sizing: border-box;

  &:checked {
    @apply border-2;
    background-color: var(--color-primary);
  }

  &:disabled {
    border-color: var(--color-border-disabled);
    background-color: var(--color-background-disabled);
    cursor: not-allowed;
  }

  &:indeterminate {
    @apply border-2;
    background-color: var(--color-background-indeterminate);
  }

  &.cfa-checkbox--error {
    @apply border-2 border-border-error;
  }

  &.cfa-checkbox--warning {
    @apply border-2 border-border-warning;
  }
}

.cfa-checkbox-wrap {
  flex-shrink: 0;

  .cfa-icon {
    display: none;
  }

  &:has(.cfa-checkbox:checked) .cfa-icon {
    display: inline-block;
  }

  &:has(.cfa-checkbox:indeterminate) .cfa-icon {
    display: none;
  }

  &:has(.cfa-checkbox:indeterminate)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    height: 2px;
    background-color: var(--color-icon-default);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* Radio */
.cfa-radio {
  @apply appearance-none border-2 border-icon-default rounded-full bg-white cursor-pointer relative;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  &:checked {
    background: radial-gradient(circle, var(--color-icon-default) 60%, white 60%);
  }

  &:disabled {
    border-color: var(--color-border-disabled);
    background-color: var(--color-background-disabled);
    cursor: not-allowed;
  }

  &.cfa-radio--small {
    width: 16px;
    height: 16px;
  }

  &.cfa-radio--error {
    @apply border-border-error;
  }

  &.cfa-radio--warning {
    @apply border-border-warning;
  }
}

/* Combobox */

.cfa-combobox__list {
  display: block;
}

.cfa-combobox__toggle {
  @apply rounded-r;
}

.cfa-combobox__field:hover:not(:has(:disabled)) .cfa-combobox__toggle {
  @apply bg-background-secondary;
}

.cfa-combobox__field:has(input[aria-expanded="true"]) input {
  @apply rounded-b-none;
}

.cfa-combobox__field input[aria-expanded="true"]:focus-visible {
  @apply outline-none;
}

.cfa-combobox__toggle:active:not(:disabled) {
  @apply bg-background-secondary border-2 border-primary;
}

/* Standard invalid fields */
[aria-invalid="true"],
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--color-border-error) !important;
  outline-color: var(--color-border-error) !important;
}

/* Focus state */
[aria-invalid="true"]:focus,
.field_with_errors input:focus,
.field_with_errors select:focus,
.field_with_errors textarea:focus {
  outline-color: var(--color-border-error) !important;
}


.field_with_errors {
    display: block;
}

/* Shared custom select — block class is the scope anchor; state comes from aria/data attrs */
.cfa-custom-select {
  position: relative;

  button {
    @apply flex items-center justify-between w-full border border-border-default rounded bg-white text-text-default overflow-hidden;
    height: 41px;

    &:focus-visible {
      outline: 4px solid var(--color-focus);
      outline-offset: -4px;
      border-color: var(--color-focus);
    }

    &[aria-expanded="true"] {
      @apply rounded-b-none;
    }

    &[aria-disabled="true"] {
      background: var(--color-background-disabled);
      color: var(--color-text-disabled);
      border-color: var(--color-border-disabled);
      cursor: not-allowed;

      &:focus-visible {
        outline: none;
        border-color: var(--color-border-disabled);
        border-width: 1px;
      }
    }
  }

  .value {
    @apply truncate text-left flex-1 pl-cfa-sm;
  }

  .chevron-wrap {
    @apply flex items-center justify-center w-10 h-full rounded-r-[3px];
  }

  button:hover:not([aria-disabled="true"]) .chevron-wrap,
  button[aria-expanded="true"] .chevron-wrap {
    @apply bg-background-secondary;
  }

  button:active:not([aria-disabled="true"]) .chevron-wrap {
    @apply bg-background-secondary border-2 border-primary rounded-l-none rounded-r-[3px];
  }

  button[aria-disabled="true"] .chevron-wrap {
    @apply bg-background-disabled border-l border-border-disabled;
  }

  .chevron-icon {
    @apply inline-flex items-center justify-center w-6 h-6 text-icon-default transition-transform duration-150 ease-in-out;
  }

  button[aria-expanded="true"] .chevron-icon {
    @apply rotate-180;
  }

  ul {
    @apply absolute left-0 top-[41px] z-10 w-full bg-white border-l border-r border-b border-border-secondary m-0 p-0 list-none gap-0;
  }

  li {
    @apply flex items-center justify-between gap-cfa-sm min-h-[41px] cursor-pointer text-text-default px-cfa-sm py-cfa-sm m-0 list-none border-t border-border-secondary first:border-t-0;

    &:hover,
    &[data-active] {
      @apply bg-primary-hover;
    }

    &[data-focused] {
      @apply outline-4 -outline-offset-4 outline-focus;
    }

    .option-label {
      @apply flex-auto min-w-0 whitespace-normal;
      line-height: 1.2;
    }

    .option-check {
      @apply inline-flex items-center text-icon-default flex-shrink-0 self-start mt-[2px];
    }
  }
}

.memorable-date {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;

  & .help_text {
    margin: 0;
  }

  & input[type="text"] {
    height: 41px;
  }

  & input[type="text"]:focus-visible {
    outline: 4px solid var(--color-focus);
    outline-offset: -4px;
    border-color: var(--color-focus);
  }
}
.select-field {
  @apply space-y-cfa-sm;
}

.select-field__wrapper {
  @apply w-full max-w-sm;
}