/**
* @file mixins.less
* @desc mixins混合函数文件
*/
/* stylelint-disable at-rule-no-unknown */
@plugin "./functions";
@import "~less-plugin-est/src/all.less";
@import "./variables/index.less";

// https://github.com/twbs/bootstrap/blob/e43f97304eac2b276c755267e29de70ae2ac7afd/scss/mixins/_screen-reader.scss#L6-L15
.veui-invisible() {
  position: absolute;
  .size(1px);
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// transition
.veui-transition(...) {
  transition-property: args(@arguments);
  transition-duration: 0.2s;
}

/* prettier-ignore */
.veui-button-transition(...) {
  .veui-transition(border-color, background-color, color, opacity, box-shadow, @arguments...);
}

// https://stackoverflow.com/questions/27000492/css3-transform-property-working-differently-in-internet-explorer
.veui-position-center(@x: 50%, @y: @x) {
  @right: 100% - @x;
  @bottom: 100% - @y;
  .absolute(auto, @right, @bottom, auto);
  transform: translate(@right, @bottom);
}

// .veui-field-require() {
//   content: "*";
//   margin-right: @veui-form-label-spacing-after-vertical;
//   color: @veui-form-label-required-color;
// }
.veui-stub() {
  &::before {
    content: "\200b";
  }
}

.veui-field-gap-error() {
  position: absolute;
  display: block;
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 12px;

  .@{veui-prefix}-icon {
    margin-top: ~"calc(30px / 2 - 0.5em)";
  }
}

// shadow阴影
.veui-overlay-shadow(@color: rgba(0, 0, 0, 0.15)) {
  box-shadow: 0 1px 4px 0 @color;
}

.veui-focus-shadow(@color: @veui-color-brand-2) {
  box-shadow: 0 0 0 2px @color;
  outline: none;
}

.veui-focus-shadow(@color, @offset) {
  outline: 2px solid @color;
  outline-offset: @offset;
  box-shadow: none;
}

.veui-focus-ring(@border-color: @veui-border-color-focus, @shadow: @veui-shadow-focus) {
  border: 1px solid @border-color;
  box-shadow: @shadow;
}
// icon size
.veui-icon-size(@size) {
  .size(auto, @size);
}
.veui-icon-size(@size, @min-size) when not (@min-size = true) {
  .size(auto, @size);
  min-height: @min-size;
}
.veui-icon-size(@size, @fixed-width) when (@fixed-width = true) {
  .size(@size);
}

.veui-search-result() {
  .@{veui-prefix}-search-result-item-matched {
    color: @veui-option-font-color-highlighted;
    background: transparent;
  }
  .@{veui-prefix}-search-result-item-separator {
    margin: 0 2 * @veui-spacing-unit; // TODO
  }
}

.veui-max-height(@item-height, @max-count, @fixed-height: false, @padding-y: @veui-padding-unit) {
  & when (isnumber(@max-count)) {
    max-height: veui-sum(@item-height * (@max-count + 0.5), @padding-y);
    & when (@fixed-height = true) {
      height: veui-sum(@item-height * (@max-count + 0.5), @padding-y);
    }
  }

  & when not (isnumber(@max-count)) {
    max-height: veui-sum(@item-height * 8.5, @padding-y); // ie 降级到 8.5
    max-height: calc(@item-height * (@max-count + 0.5) + @padding-y);
    & when (@fixed-height = true) {
      height: veui-sum(@item-height * 8.5, @padding-y); // ie 降级到 8.5
      height: calc(@item-height * (@max-count + 0.5) + @padding-y);
    }
  }
}

.veui-dropdown-menu-max-height(@sizes, @max-count: 8, @fixed-height: false, @padding-y: @veui-padding-unit, @option-height: "veui-option-height") {
  .loop(@index: 1) when (@index <= length(@sizes)) {
    @size: extract(@sizes, @index);
    @height: "@{option-height}-@{size}";

    &[ui~="@{size}"] {
      .veui-max-height(@@height, @max-count, @fixed-height, @padding-y);
    }

    .loop(@index + 1);
  }

  .loop();

  overflow-y: auto;
}