@charset "UTF-8";
@import "./variables.scss";
@import "./mixin.scss";

.x-clear {
  @extend %clear;
}

.x-placeholder {
  color: $placeholder-color;
}

.x-fl {
  float: left !important;
}

.x-fr {
  float: right !important;
}

.x-text-center {
  text-align: center;
}

.x-text-right {
  text-align: right;
}

.x-bold {
  font-weight: 600 !important;
}

.x-gray-c {
  color: #ccc !important;
}

.x-gray-3 {
  color: #333 !important;
}

.x-gray-6 {
  color: #666 !important;
}

.x-gray-9 {
  color: #999 !important;
}

.x-success-color {
  color: $success-text-color !important;
}

.x-warning-color {
  color: $warning-text-color !important;
}

.x-info-color {
  color: $info-text-color !important;
}

.x-error-color {
  color: $error-text-color !important;
}

.x-space {
  margin-right: $margin-x !important;
}

.x-space-small {
  margin-right: $margin-x-small !important;
}

.x-space-large {
  margin-right: $margin-x-large !important;
}

.x-blank {
  margin-bottom: $margin-y !important;
}

.x-blank-large {
  margin-bottom: $margin-y-large !important;
}

// 左右两端对齐
.x-justify {
  @extend %justify;
}

.x-ellipsis {
  @extend %ellipsis;
}

.x-full-width {
  width: 100% !important;
}

.x-pos-s {
  position: static !important;
}

.x-fixed-bottom {
  @include fixed(bottom);
}

// display
.x-dis-block {
  display: block !important;
}

.x-dis-inline {
  display: inline !important;
}