@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/spacing';
@use '../icon';
@use '../text-field';
@use './form-field' as *;

// FormFieldHintTextColor variants - keep this list in sync with TypeScript enum FormFieldHintTextColor
$form-field-hint-text-colors: (
  'info',
  'warning',
  'error',
  'success',
);

// FormFieldCounterColor variants - keep this list in sync with TypeScript enum FormFieldCounterColor
$form-field-counter-colors: (
  'info',
  'warning',
  'error',
);

.#{$prefix}__label {
  display: flex;
  color: palette.semantic-variable(text, neutral-solid);

  @include typography.semantic-variable(label-primary);

  &__required-marker {
    margin-right: spacing.semantic-variable(gap, tiny);
    color: palette.semantic-variable(text, brand);
  }

  &__optional-marker {
    display: flex;
    align-items: center;
    margin-left: spacing.semantic-variable(gap, tiny);
    color: palette.semantic-variable(text, neutral);
  }

  &__information-marker {
    margin-left: spacing.semantic-variable(gap, tiny);
  }

  &__colon {
    margin-left: spacing.semantic-variable(gap, tight);
    color: palette.semantic-variable(text, neutral-solid);
  }
}

.#{$prefix}__label-area {
  padding-top: spacing.semantic-variable(padding, vertical, calm);
  padding-bottom: spacing.semantic-variable(padding, vertical, calm);
  box-sizing: border-box;
  display: flex;
  align-items: center;

  &--main {
    padding-top: spacing.semantic-variable(padding, vertical, calm);
    min-height: spacing.semantic-variable(size, container, micro);
  }

  &--sub {
    padding-top: spacing.semantic-variable(padding, vertical, tight);
    min-height: spacing.semantic-variable(size, container, atomic);
  }
}

// Layout styles
.#{$prefix}--horizontal {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;

  .#{$prefix}__label-area {
    width: fit-content;
  }

  .#{$prefix}__data-entry {
    flex-grow: 1;
    max-width: spacing.semantic-variable(size, container, wide);
  }
}

.#{$prefix}--stretch {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;

  .#{$prefix}__label-area {
    width: fit-content;
  }

  .#{$prefix}__data-entry {
    flex-grow: 1;
  }
}

.#{$prefix}--vertical {
  display: flex;
  flex-direction: column;
  gap: spacing.semantic-variable(gap, tight);

  .#{$prefix}__label-area {
    width: fit-content;
    padding-top: spacing.semantic-variable(padding, vertical, tiny);
    padding-bottom: spacing.semantic-variable(padding, vertical, tiny);
  }

  .#{$prefix}__data-entry {
    flex-grow: 1;
    max-width: spacing.semantic-variable(size, container, wide);
    margin-left: 0;
  }
}

// Density styles for horizontal layout
.#{$prefix}--horizontal {
  &.#{$prefix}--base {
    .#{$prefix}__label-area {
      width: fit-content;
    }

    .#{$prefix}__data-entry {
      flex-grow: 1;
      max-width: spacing.semantic-variable(size, container, wide);
    }
  }

  &.#{$prefix}--tight {
    .#{$prefix}__label-area {
      width: spacing.semantic-variable(size, container, tight);
    }

    .#{$prefix}__data-entry {
      flex-grow: 1;
      max-width: spacing.semantic-variable(size, container, wide);
    }
  }

  &.#{$prefix}--narrow {
    .#{$prefix}__label-area {
      width: spacing.semantic-variable(size, container, slim);
    }

    .#{$prefix}__data-entry {
      flex-grow: 1;
      max-width: spacing.semantic-variable(size, container, wide);
    }
  }

  &.#{$prefix}--wide {
    .#{$prefix}__label-area {
      width: spacing.semantic-variable(size, container, narrow);
    }

    .#{$prefix}__data-entry {
      flex-grow: 1;
      max-width: spacing.semantic-variable(size, container, wide);
    }
  }
}

// Density styles for stretch layout
.#{$prefix}--stretch {
  &.#{$prefix}--tight {
    .#{$prefix}__data-entry {
      max-width: spacing.semantic-variable(size, container, slim);
    }
  }

  &.#{$prefix}--narrow {
    .#{$prefix}__data-entry {
      max-width: spacing.semantic-variable(size, container, standard);
    }
  }

  &.#{$prefix}--wide {
    .#{$prefix}__data-entry {
      max-width: spacing.semantic-variable(size, container, broad);
    }
  }
}

.#{$prefix}__data-entry {
  display: flex;
  flex-direction: column;
  margin-left: spacing.semantic-variable(gap, base);
  gap: spacing.semantic-variable(gap, slim);
}

.#{$prefix}__control-field-slot {
  &--main {
    min-height: spacing.semantic-variable(size, container, micro);
  }

  &--sub {
    min-height: spacing.semantic-variable(size, container, atomic);
  }

  &--columns-2,
  &--columns-3,
  &--columns-4 {
    display: grid;
    gap: spacing.semantic-variable(gap, calm);
  }

  &--columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &--columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  &--columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.#{$prefix}__hint-text-and-counter-area {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: spacing.semantic-variable(gap, base);

  &--align-right {
    justify-content: flex-end;
  }
}

.#{$prefix}__counter {
  @include typography.semantic-variable(annotation);

  color: palette.semantic-variable(text, neutral);
}

@each $color in $form-field-counter-colors {
  .#{$prefix}__counter--#{$color} {
    @if $color == 'info' {
      color: palette.semantic-variable(text, neutral);
    } @else if $color == 'warning' {
      color: palette.semantic-variable(text, warning);
    } @else if $color == 'error' {
      color: palette.semantic-variable(text, error);
    }
  }
}

.#{$prefix}__hint-text {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  align-items: center;
  gap: spacing.semantic-variable(gap, tiny);
  color: palette.semantic-variable(text, neutral);

  @include typography.semantic-variable(annotation);
}

.#{$prefix}__hint-text__icon {
  font-size: spacing.semantic-variable(size, element, narrow);
}

@each $color in $form-field-hint-text-colors {
  .#{$prefix}__hint-text--#{$color} {
    @if $color == 'info' {
      color: palette.semantic-variable(text, neutral);
    } @else if $color == 'warning' {
      color: palette.semantic-variable(text, warning);
    } @else if $color == 'error' {
      color: palette.semantic-variable(text, error);
    } @else if $color == 'success' {
      color: palette.semantic-variable(text, success);
    }
  }
}