@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((form))} {
  font-size: #{getValName((form, font-size))};
}

#{getClassName((form, group))} {
  display: flex;
  margin-bottom: 1em;
  line-height: 1;
  &.is-required {
    #{getClassName((form, group, label))} {
      &:before {
        content: '*';
        color: #{getValName((color, danger))};
        margin-right: #{getValName((space, xs))};
      }
    }
  }
  &.is-error {
    #{getClassName((input))} {
      #{joinValName((shadow, base))}: 0 0px 4px color.adjust(map.get($colors, danger, base), $alpha: -0.8);
      @include set-css-val(
        input,
        (
          'border-color': (color, danger),
          'focus-border-color': (color, danger),
        )
      )
    }
  }
  #{getClassName((form, group, label))} {
    flex: 1;
    flex-basis: auto;
    width: #{getValName((form, group, label-width))};
    min-width: #{getValName((form, group, label-width))};
    max-width: #{getValName((form, group, label-width))};
    display: inline-flex;
    /* justify-content: center; */
    align-items: center;
    // padding: #{getValName((space, xs))} #{getValName((space, s))} #{getValName((space, xs))} #{getValName((space, none))};
    padding-right: #{getValName((space, s))};
    &:empty {
      display:none;
    }
  }
  #{getClassName((form, group, box))} {
    flex: 1;
    position: relative;
    flex-basis: auto;
  }
  #{getClassName((form, group, tip))} {
    position: absolute;
    height: 1.2em;
    width: 100%;
    top: 100%;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: #{getValName((heading9))};
    color: #{getValName((color, danger))};
    padding-top: .2em;
  }
}

#{getClassName((form, layout, horizontal))} {
  #{getClassName((form, group, label))} {
    padding: #{getValName((space, xs))} #{getValName((space, s))} #{getValName((space, xs))} #{getValName((space, none))};
  }
}

#{getClassName((form, layout, vertical))} {
  #{getClassName((form, group, label))} {
    justify-content: flex-end;
  }
  #{getClassName((form, group))} {
    flex-direction: row;
  }
}

#{getClassName((form, layout, inline))} {
  #{getClassName((form, group))} {
    display: inline-flex;
    margin-right: #{getValName((space, s))};
    #{getClassName((form, group, label))} {
      width: auto;
      flex: 0;
      min-width: inherit;
      max-width: inherit;
    }
  }
}

#{getClassName((form, layout, horizontal))} {
  #{getClassName((form, group))} {
    flex-direction: column;
    #{getClassName((form, group, label))} {
      width: 100%;
      max-width: inherit;
    }
  }
}

#{getClassName((form))} {
  #{joinValName((form, group, label-width))}: 80px;
  @include set-css-val(
    form,
    (
      'font-size': (heading8)
    )
  )
}