// Component: Form Item

@use 'sass:math';
@use '00-config' as *;

$form-background-color: gesso-color(form, background) !default;
$form-background-color-focus: gesso-color(form, background-active) !default;
$form-border-color: gesso-color(form, border) !default;
$form-border-color-focus: gesso-color(form, border-dark) !default;
$form-box-shadow-focus: gesso-box-shadow(2) !default;
$form-disabled-opacity: 0.35 !default;
$form-text-size: gesso-base-font-size() !default;

.c-form-item {
  margin-block: 0 rem(gesso-spacing(3));
  margin-inline: 0;
}

%disabled-form-styles {
  .is-disabled > & {
    opacity: $form-disabled-opacity;
  }
}

.c-form-item__label {
  @extend %disabled-form-styles;
  display: block;
  font-weight: gesso-font-weight(semibold);
}

.c-form-item__element {
  align-items: center;
  display: flex;
  gap: 0.25em;

  > input {
    flex-shrink: 1;
    min-width: 0;
  }

  .is-full-width > & {
    > input {
      flex-grow: 1;
    }
  }
}

.c-form-item__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

// .c-form-item__legend {}

.c-form-item__description {
  @extend %disabled-form-styles;
  color: gesso-color(text, secondary);
  font-size: rem(gesso-font-size(2));

  > :last-child {
    margin-block-end: 0;
  }
}

.c-form-item__errors {
  @extend %disabled-form-styles;
}

.c-form-item__actions {
  margin-block-start: rem(gesso-spacing(2));
}

.c-form-item__required-marker::before {
  content: '*';
}

%c-form-item__box,
.c-form-item__color,
.c-form-item__date,
.c-form-item__email,
.c-form-item__file,
.c-form-item__month,
.c-form-item__number,
.c-form-item__password,
.c-form-item__search,
.c-form-item__select,
.c-form-item__tel,
.c-form-item__text,
.c-form-item__textarea,
.c-form-item__time,
.c-form-item__url,
.c-form-item__week {
  @include focus();
  appearance: none;
  background-color: $form-background-color;
  border: 1px solid $form-border-color;
  border-radius: 0;
  display: inline-block;
  font-size: rem($form-text-size);
  height: rem(44px);
  line-height: math.div(22px, $form-text-size);
  margin: rem(gesso-spacing(0.5)) 0;
  max-width: 100%;
  padding: em(10px, $form-text-size) em(7px, $form-text-size);
  transition-duration: gesso-duration(short);
  transition-property: background-color, border;
  transition-timing-function: gesso-easing(ease-in-out);

  &:hover,
  &:focus {
    background-color: $form-background-color-focus;
    border: 1px solid $form-border-color-focus;
  }

  &:disabled {
    cursor: default;
    opacity: $form-disabled-opacity;

    &:hover,
    &:focus {
      background-color: $form-background-color;
      border: 1px solid $form-border-color;
    }
  }

  .is-full-width > & {
    width: 100%;
  }
}

.c-form-item__textarea {
  height: auto;
}
