@import '../base/bootstrap-extended/include'; // Bootstrap includes
@import '../base/components/include'; // Components includes
@import './variables';

.x-transparent {
  background: transparent;
}
.x-text-normal{
  font-weight: normal !important;
}
.x-text-bold{
  font-weight: 600 !important;
}
.x-text-normal{
  font-weight: normal !important;
}
// 只读
.x-only-read{
  pointer-events: none;
  cursor: not-allowed;
}

//
.x-section {
  width: 100%;
  height: 2rem;
}

// 图标
.x-section-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
}

// 无圆角
.x-no-radius{
  border-radius: 0 !important;
}
.x-border-dash {
  border-width: 1px;
  border-style: dashed;
}
.x-link {
  font-weight: bold;
  text-decoration: $link-decoration;
  transition: $x-hover-transition;

  &:hover,
  &:focus {
    font-weight: bold;
    opacity: 0.6;
    text-decoration: $link-hover-decoration;
    cursor:pointer
  }

  &:disabled {
    color: $btn-link-disabled-color;
    pointer-events: none;
  }
}
// 无圆角
.x-dot{
  width: .6rem;
  height: .6rem;
  border-radius: .6rem;
  margin-right: .5rem;
}

// 行列表格布局
.x-row{
  height: 3rem;
  line-height: 3rem;
  display: flex;
  align-items: center;
  .x-col {
    line-height: 3rem;
    height: 3rem;
  }
}

.x-hover {
  transition: $x-hover-transition;
  &:hover {
    opacity: 0.6;
  }
}

.x-navbar-hover {
  transition: all 0.33s ease 0.2s;
  &:hover {
    background-color: rgba($primary, .15);
  }
}
.x-require-indicator {
  margin-right: .2rem;
  color: #f5222d;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.x-dashed-border {
  border: 1px dashed $border-color !important;
}

.x-border {
  border: 1px solid $border-color !important;
}

@each $color_name, $color in $theme-colors {
  .x-border-color-#{$color_name} {
    border-color: $color !important;
  }
}

// 单行字体溢出省略
.x-text-cut{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 禁用
.x-forbidden {
  cursor: not-allowed;
}

$x-widths: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
@each $width in $x-widths{
  .x-w-#{$width} {
    width: $width*1%;
  }
}

@each $width in $x-widths{
  .x-min-w-#{$width} {
    min-width: $width*1%;
  }
}

@each $height in $x-widths{
  .x-min-h-#{$height} {
    min-height: $height*1%;
  }
}

$x-lines: (2,3,4,5,6,7,8,9,10);
@each $line in $x-lines{
  .x-line-#{$line} {
    display: -webkit-box;
    -webkit-line-clamp: #{$line};
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 1200px) {
  .x-max-xl-none {
    display: none !important;
  }
}