@prefix: mx;

// .@{prefix}-btn-ripple:after {
//   content: "";
//   display: block;
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   left: -100%;
//   top: 0;
//   pointer-events: none;
//   background: rgba(0, 0, 0, 20%);
//   transform: translateX(100%);
//   opacity: 0;
//   transition: transform 300ms cubic-bezier(.38, 0, .24, 1), opacity 300ms linear
// }

// .@{prefix}-btn-ripple {
//   position: relative;
//   overflow: hidden;
//   transform: translate3d(0, 0, 0);
// }

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

.scrollbar(@size: 6px, @borderSize: 0px) {
  // FINotificationRefox 等浏览器标准支持的滚动条样式设置
  scrollbar-color: rgb(242, 243, 245) transparent;
  scrollbar-width: thin;

  // Safari/Chrome 中滚动条样式设置
  &::-webkit-scrollbar {
    width: @size;
    height: @size;
  }

  &::-webkit-scrollbar-thumb {
    border: @borderSize solid transparent;
    background-clip: content-box;
    background-color: var(--scrollbar-color);
    border-radius: @size * 2 - 1px;
  }
}

.icon-hover(@icon-hover-border-radius,@icon-hover-color-bg, @icon-bg-height) {
  .@{prefix}-icon-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: 0;

    .@{prefix}-icon {
      position: relative;
    }

    &::before {
      content: '';
      position: absolute;
      display: block;
      border-radius: @icon-hover-border-radius;
      background-color: transparent;
      box-sizing: border-box;
      transition: background-color 0.1s linear;
    }

    &:hover::before {
      background-color: @icon-hover-color-bg;
    }

    &.@{prefix}-icon-hover-disabled::before {
      opacity: 0;
    }

    &::before {
      top: 50%;
      left: 50%;
      height: @icon-bg-height;
      width: @icon-bg-height;
      transform: translate(-50%, -50%);
    }
  }
}