/*!
 * name: @jswork/wsui-shorty
 * description: Short and pithy style toolkits.
 * homepage: https://github.com/afeiship/wsui-shorty
 * version: 1.2.3
 * date: 2024-02-21 11:13:00
 * license: MIT
 */

/*align Start*/
.vat {
  &,
  &_ > * {
    vertical-align: top;
  }
}

.vab {
  &,
  &_ > * {
    vertical-align: bottom;
  }
}

.vam {
  &,
  &_ > * {
    vertical-align: middle;
  }
}
/*align End*/

/*background Start*/
.bgn {
  background: none !important;
}
/*background End*/

/*border Start*/
.bdn {
  border: none !important;
}
/*border End*/

/** box-sizing Start **/
.bsb {
  box-sizing: border-box;
}
.bsc {
  box-sizing: content-box;
}

/** box-sizing  End **/

.square,
.wh100 {
  width: 100%;
  height: 100%;
}

.bgdn {
  border: none !important;
  background: none !important;
}

/** clearfix Start **/
/**
 * http://nicolasgallagher.com/micro-clearfix-hack/
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 * 3. Reference:http://nicolasgallagher.com/micro-clearfix-hack/
 */
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/** clearfix  End **/

.cd {
  cursor: default;
}

.cp {
  cursor: pointer;
}

.pn {
  pointer-events: none;
}

.debug-red {
  border: 1px solid #f00;
}

.debug-green {
  border: 1px solid #0f0;
}

.debug-blue {
  border: 1px solid #00f;
}

/** display Start **/
.db {
  &,
  &_ > * {
    display: block;
  }
}

.di {
  &,
  &_ > * {
    display: inline;
  }
}

.dib {
  &,
  &_ > * {
    display: inline-block;
  }
}

.dtbc {
  &,
  &_ > * {
    display: table-cell;
  }
}

.dtb {
  display: table;
}

.dflex {
  display: flex;
}

.dn {
  display: none;
}
/** display  End **/

.x,
.y {
  display: flex;
}

.x {
  flex-direction: row;
}

.y {
  display: flex;
}

.xcc {
  items-align: center;
  justify-content: center;
}

.xcb {
  items-align: center;
  justify-content: space-between;
}

// @references: https://blog.csdn.net/weixin_39003573/article/details/82703477

.flip-x {
  transform: raotateY(180deg);
}

.flip-y {
  transform: raotateX(180deg);
}

/** float Start **/
.l {
  &,
  &_ > * {
    float: left;
  }
}

.r {
  &,
  &_ > * {
    float: right;
  }
}

.lfix_ {
  @extend .clearfix;
  & > * {
    float: left;
  }
}

.rfix_ {
  @extend .clearfix;
  & > * {
    float: right;
  }
}

.lrfix_ {
  @extend .clearfix;
  > *:first-child {
    float: left;
  }
  > *:last-child {
    float: right;
  }
}

/** float  End **/

/*font-size Start*/
.f0 {
  font-size: 0 !important;
}
/*font-size End*/

.h100 {
  height: 100%;
}
.min-h100 {
  min-height: 100%;
}
.max-h100 {
  max-height: 100%;
}

$line-clamp-list:(1,2,3);

%line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

@each $line-clamp in $line-clamp-list {
  .lc-#{$line-clamp} {
    @extend %line-clamp;
    -webkit-line-clamp: $line-clamp;
  }
}

/**  margin Start **/
.auto {
  margin-left: auto;
  margin-right: auto;
}

.maa {
  margin: auto;
}

.m0a {
  margin: 0 auto;
}

.m0 {
  margin: 0 !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.ml0 {
  margin-left: 0 !important;
}

.mr {
  &_ > *:last-child {
    margin-right: 0;
  }
}
.ml {
  &_ > *:first-child {
    margin-left: 0;
  }
}

.mt {
  &_ > *:first-child {
    margin-top: 0;
  }
}

.mb {
  &_ > *:last-child {
    margin-bottom: 0;
  }
}

// nagetive -1:
.mt__ {
  margin-bottom: -1px;
}
.mr__ {
  margin-right: -1px;
}
.mb__ {
  margin-bottom: -1px;
}
.ml__ {
  margin-left: -1px;
}

/*margin End*/

.ovh {
  overflow: hidden;
}
.ovh-x {
  overflow-x: hidden;
}
.ovh-y {
  overflow-y: hidden;
}

.ovs {
  overflow: scroll;
}
.ovs-x {
  overflow-x: scroll;
}
.ovs-y {
  overflow-y: scroll;
}

.ova {
  overflow: auto;
}

/*padding Start*/
.p0 {
  padding: 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pl0 {
  padding-left: 0 !important;
}

.pr {
  &_ > *:last-child {
    padding-right: 0;
  }
}

.pl {
  &_ > *:first-child {
    padding-left: 0;
  }
}
.pt {
  &_ > *:first-child {
    padding-top: 0;
  }
}
.pb {
  &_ > *:last-child {
    padding-bottom: 0;
  }
}
/* padding End*/

/** position Start **/
.rel {
  &,
  &_ > * {
    position: relative;
  }
}

.abs {
  &,
  &_ > * {
    position: absolute;
  }
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.t0 {
  top: 0!important;
}

.r0 {
  right: 0!important;
}

.b0 {
  bottom: 0!important;
}

.l0 {
  left: 0!important;
}

.lr0{
  left:0;
  right:0;
}

.tb0{
  top:0;
  bottom:0;
}

.tr0{
  right:0;
  top:0;
}

.rb0{
  right:0;
  bottom:0;
}

.bl0{
  left:0;
  bottom:0;
}

.lt0{
  left:0;
  top:0;
}

.trbl0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


.lt5{
  left: 50%;
  top: 50%;
}

.t375{
  top: 37.5%;
}

.t125{
  top: 12.5%;
}

.t50 {
  top: 50%;
}

.r50 {
  right: 50%;
}

.b50 {
  bottom: 50%;
}

.l50 {
  left: 50%;
}

.t100 {
  top: 100%;
}

.r100 {
  right: 100%;
}

.b100 {
  bottom: 100%;
}

.l100 {
  left: 100%;
}


.p-top{
  top:0;
  @extend .lr0;
}
.p-bottom{
  bottom:0;
  @extend .lr0;
}

/** position  End **/

/** shadow-depth Start **/

.shadow-1 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.shadow-2 {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.shadow-3 {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.shadow-4 {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19);
}

.shadow-5 {
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25);
}

.shadow-6 {
  box-shadow: 0 19px 60px rgba(0, 0, 0, 0.3);
}

.shadow-in-1 {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.shadow-in-2 {
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.12);
}

.shadow-in-3 {
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.16);
}

.shadow-in-4 {
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.19);
}

.shadow-in-5 {
  box-shadow: inset 0 14px 45px rgba(0, 0, 0, 0.25);
}

.shadow-in-6 {
  box-shadow: inset 0 19px 60px rgba(0, 0, 0, 0.3);
}

/** shadow-depth  End **/

.circle {
  border-radius: 50%;
}

.round {
  border-radius: 1000px;
}

.rect {
  border-radius: none !important;
}

.radius-t0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.radius-r0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.radius-b0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.radius-l0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

/** status Start **/
.disabled {
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

[hidden],
.hidden {
  display: none !important;
}

.unactive {
  filter: grayscale(100%);
  color: #999;
}
/** status  End **/

/** text-decoration Start **/
.tdn {
  text-decoration: none;
}
.tdu {
  text-decoration: underline;
}
.tdlh {
  text-decoration: line-through;
}

.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tj {
  text-align: justify;
}

.tlr_ {
  > *:first-child {
    text-align: left;
  }
  > *:last-child {
    text-align: right;
  }
}

.nowrap {
  white-space: nowrap;
}

.ell {
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  overflow: hidden;
}

.b {
  font-weight: bold;
}

.n {
  font-weight: normal;
  font-style: normal;
}

.usn {
  user-select: none;
}
/** text-decoration  End **/

/**  transform  End **/

.tsy5 {
  transform: translateY(-50%);
}

.tsx5 {
  transform: translateX(-50%);
}

.tsxy5 {
  transform: translate(-50%, -50%);
}


/**  transform  End **/

/** transparent Start **/
.opacity-text {
  color: transparent;
}
.opacity-bg {
  background: transparent;
}

.vis-v {
  visibility: visible;
}
.vis-h {
  visibility: hidden;
}
/** transparent  End **/

.w100 {
  width: 100%;
}
.min-w100 {
  min-width: 100%;
}
.max-w100 {
  max-width: 100%;
}

/* z-index start */
.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.z3 {
  z-index: 3;
}
.z100 {
  z-index: 100;
}

/* z-index end */