@base-border-color: #dcdfe6;
@base-border: 0.5px solid @base-border-color;
@light-border: 0.5px solid lighten(@base-border-color, 2%);
@lighter-border: 0.5px solid lighten(@base-border-color, 4%);
@extra-light-border: 0.5px solid lighten(@base-border-color, 6%);
@drank-border: 0.5px solid darken(@base-border-color, 40%);

.border(@width) {
  border: @drank-border;
  border-width: @width;
}

.drank-border-bottom(@width) {
  border-bottom: @drank-border;
  border-bottom-width: @width;
}

.ellipsis(@n: 2) {
  display: -webkit-box;
  -webkit-line-clamp: @n;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.visible(@origin) {
  &-enter,
  &-leave {
    &-active {
      transition: transform 0.3s;
      @origin();
    }
  }
  &-enter {
    &-from {
      transform: scale(0);
    }
    &-to {
      transform: scale(1);
    }
  }
  &-leave {
    &-from {
      transform: scale(1);
    }
    &-to {
      transform: scale(0);
    }
  }
}