@import 'variable.less';

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// a11y 提示弹层/快捷键表单弹层/搜索弹层
.overlay-shadow(@color: var(--widget-shadow)) {
  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
}

// quick-open/debug toolbar
.modal-shadow(@color: var(--widget-shadow)) {
  box-shadow: 0 5px 8px @color;
}

// notification/feedback
.message-shadow(@color: var(--widget-shadow)) {
  box-shadow: 0 0px 8px @color;
}

.reset-component() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @text-color;
  font-size: @font-size-base;
  font-variant: @font-variant-base;
  line-height: @line-height-base;
  list-style: none;
  font-feature-settings: @font-feature-settings-base;
}

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);

    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);

    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~'@{keyframeName}Out';
    animation-play-state: running;
    pointer-events: none;
  }
}

.iconfont-mixin() {
  display: inline-block;
  color: @icon-color;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  > * {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &::before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit((@size / 12px));

  font-size: 12px;
  // IE9
  font-size: ~'@{size} \9';
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

.clearfix() {
  zoom: 1;
  &::before,
  &::after {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }
}

.box(@position: absolute) {
  position: @position;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-mask() {
  pointer-events: none;

  &.@{prefix}-zoom-enter,
  &.@{prefix}-zoom-appear {
    transform: none; // reset scale avoid mousePosition bug
    opacity: 0;
    animation-duration: @animation-duration-slow;
    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
  }

  &-mask {
    .box(fixed);
    z-index: @zindex-modal-mask;
    height: 100%;
    background-color: @modal-mask-bg;

    &-hidden {
      display: none;
    }
  }

  &-wrap {
    .box(fixed);
    overflow: auto;
    outline: 0;
  }
}
