@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$form: () !default;
$form: map.merge(
  (
    error-color: value('color-error-light-1'),
    error-shadow: value('box-shaodw-focus') value('color-error-opacity-6'),
    asterisk-color: value('color-error-base'),
    asterisk-family: value('font-family-base'),
    tip-color: value('color-error-base')
  ),
  $form
);

.#{$namespace}-form {
  &-vars {
    @include define-preset-values('form', $form);
  }

  @include basis {
    position: relative;
  }

  @include inherit-color;

  &--inline {
    display: inline-flex;
    flex-flow: row wrap;
  }

  &__item {
    @include basis {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 28px;
    }

    &--action {
      justify-content: center;
      margin-bottom: 0;
      text-align: center;
    }

    &--padding::before {
      padding-inline-end: 8px;
      margin-bottom: 4px;
      pointer-events: none;
      visibility: hidden;
      content: '-';
      opacity: 0%;
    }
  }

  &--inline &__item {
    flex: 1 0 auto;
    width: auto;
    min-width: 40px;

    &--action {
      flex: 0 0 auto;
    }
  }

  &__placeholder,
  &__label {
    display: inline-flex;
    align-items: center;
    padding-inline-end: 8px;
    white-space: nowrap;
  }

  &__placeholder {
    position: absolute;
    visibility: hidden;
  }

  &__control {
    position: relative;
    display: flex;
    align-items: center;

    &__no-label {
      width: 100%;
    }
  }

  &__item--action &__control {
    justify-content: center;
  }

  &--label-top &__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  &--label-top &__label {
    justify-content: flex-start;
    width: 100%;
    padding-inline-end: 0;
    margin-bottom: 4px;
    text-align: left;
  }

  &--label-top &__control {
    width: 100%;
  }

  // &--inline &__control {
  //   width: auto;
  // }

  &--label-right &__label {
    align-self: stretch;
    justify-content: flex-end;
    text-align: right;
  }

  &--label-left &__label {
    align-self: stretch;
    justify-content: flex-start;
    text-align: left;
  }

  &__help {
    margin-inline-end: 3px;
    cursor: help;
  }

  &--label-top &__help,
  &--label-left &__help {
    order: 1;
    margin-inline: 3px 0;
  }

  @mixin asterisk {
    display: inline-block;
    font-family: value('form-asterisk-family');
    color: value('form-asterisk-color');
    content: '*';
    user-select: none;
  }

  &__item--required &__label::before {
    @include asterisk;

    margin-inline-end: 4px;
  }

  &--label-top &__item--required &__label {
    &::before {
      display: none;
    }

    &::after {
      @include asterisk;

      margin-inline-start: 4px;
    }
  }

  &__error-tip {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 3px;
    color: value('form-tip-color');
    white-space: nowrap;
    user-select: none;
  }
}