@import './../theme/vars.scss';

@mixin ellipsis($clamp: 1) {
  @if ($clamp == 1) {
    white-space: nowrap;
  }

  @else {
    display: box;
    text-overflow: ellipsis;
    -webkit-line-clamp: $clamp;
    -webkit-box-orient: vertical;
  }

  overflow: hidden;
  text-overflow: ellipsis;
}

// 组合 input
@mixin composeInput($cls: custom-input) {
  .#{$cls} {
    display: inline-table;
    vertical-align: middle;
    background: white;
    border: 1px solid #dedede;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    box-sizing: border-box;
    transition: all 0.1s linear;

    .amos-input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;

      &:not([disabled]):hover,
      &:not([disabled]):focus {
        border: none;
        box-shadow: none;
      }
    }

    &:hover {
      border-color: $border-color-active;
    }
  }
}

@mixin makeTextShadowAnim($animName, $textColor) {
  // animate
  @keyframes #{$animName} {
    0% { text-shadow: 0 0 1px $textColor; }
    20% { text-shadow: 0 0 3px $textColor; }
    50% { text-shadow: 0 0 5px $textColor; }
    100% { text-shadow: 0 0 8px $textColor; }
  }
}