@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;
$formPrefixClass: #{$prefix}form;
$formFieldPrefixClass: #{$formPrefixClass}-field;

@mixin add-align {
  &.is-left {
    text-align: left;
  }
  &.is-right {
    text-align: right;
  }
  &.is-center {
    text-align: center;
  }
}

.#{$formPrefixClass} {
  font-size: $formFontSize;
}
.#{$formFieldPrefixClass} {
  box-sizing: border-box;
  display: flex;
  font-size: $formFieldFontSize;
  min-height: $formFieldHeight;
  border: 0;
  border-style: solid;
  line-height: $formFieldLineHeight;
  background: $formFieldBackground;
  &.is-inline {
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: $formFieldInlinePadding;
    border-color: $formFieldBorderColor;
    @include hair-border(inherit, bottom);
    .#{$formFieldPrefixClass}__control {
      > :not(.#{$prefix}input):not(.#{$prefix}select) {
        padding-left: .625em;
      }
    }
    .#{$formFieldPrefixClass}__control__error {
      font-size: .75em;
      padding: 0 20px 20px .625em;;
    }
  }
  &.is-block {
    flex-flow: column wrap;
    padding: $formFieldBlockPadding;
    .#{$formFieldPrefixClass}__label {
      width: 100%;
    }
    .#{$formFieldPrefixClass}__control {
      padding: $formFieldControlPadding;
    }
    .#{$formFieldPrefixClass}__control__error {
      font-size: .875em;
      padding: $formFieldControlErrorPadding;
    }
  }
  &.no-padding {
    padding: 0;
  }
  &__label {
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    box-sizing: border-box;
    color: $formFieldLabelColor;
    font-size: 1em;
    @include add-align;
    &.is-required {
      &::before {
        content: '*';
        position: absolute;
        display: inline-block;
        color: $colorRed;
        top: 0;
        left: -.5em;
        font-size: 1.2em;
      }
    }
  }
  &__control {
    flex-grow: 1;
    > .#{$prefix}input, .#{$prefix}select {
      width: 100%;
    }
    @include add-align;
    &__error {
      color: $formFieldErrorColor;
      line-height: 1em;
    }
  }
}