/* stylelint-disable at-rule-no-unknown */
@plugin "./functions";
@import "~less-plugin-est/src/all.less";
@import "./variables.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;
}

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

/* 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-stub() {
  &::before {
    content: "\200b";
  }
}

.dls-focus-ring(@border-color: @dls-border-color-focus, @shadow: @dls-shadow-focus) {
  border: 1px solid @border-color;
  box-shadow: @shadow;
}

.dls-icon-size(@size) {
  .size(auto, @size);
}
.dls-icon-size(@size, @min-size) when not (@min-size = true) {
  .size(auto, @size);
  min-height: @min-size;
}
.dls-icon-size(@size, @fixed-width) when (@fixed-width = true) {
  .size(@size);
}

/**
 * TODO: remove the following mixins
 */
.veui-overlay-shadow() {
  box-shadow: 0 1px 4px fadeout(#000, 80%);
}

.veui-focus-shadow(@color: fadeout(@veui-gray-color-4, 50%)) {
  box-shadow: 0 0 0 2px @color;
  outline: none;
}

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