@use "sass:map";
@use "./base";

// ===== input =====
$input-size-list: base.$form-control-size-list !default;

// ===== textarea =====
$textarea-padding-vertical: base.padding(2) !default;
$textarea-padding-horizontal: base.padding(3) !default;

@function input-padding-vertical($size: base.$form-control-default-size) {
  @return base.form-control-box-padding-vertical($size);
}

@mixin input-wrapper-box() {
  & {
    padding: 0;
    border: base.border($color: base.$form-control-border-color);
    border-radius: base.$border-radius-medium;
  }
}

@mixin input-box($size: base.$form-control-default-size) {
  @include base.form-control-box();
  & {
    // 先不指定 height
    // @todo 待确认，详见 components/input/src/style.scss 的 `&-size-#{$size} input {...}`
    // chrome Version 77.0.3865.90 可能在指定 height 的情况下
    // 对齐 baseline 时计算某些字体的 line-height / virtual-area 有问题
    //height: form-control-height();
    max-height: base.form-control-height($size: base.$form-control-default-size);
    line-height: base.line-height-regular(map.get(base.$font-size, $size));

    padding: input-padding-vertical($size) base.$form-control-box-padding-horizontal;
  }
  &:focus {
    @include base.focus-ring();
  }
  // readonly disabled 样式一致
  &[readonly],
  &[disabled] {
    @include base.form-control-box-disabled();
  }
  &[readonly] {
    cursor: default;
  }
}

@mixin textarea-box() {
  @include input-box();
  & {
    max-height: initial;
    padding: $textarea-padding-vertical $textarea-padding-horizontal;
    height: initial;
    min-height: base.line-height(base.font-size()) * 2 + ($textarea-padding-vertical + base.$border-width-base) * 2;
    // Textarea should really only resize vertically so they don't break their (horizontal) containers.
    resize: vertical;
  }
}