/* 滚动条样式美化 */
.#{$lib-name}-scrollbar {
  overflow-y: auto;
}

.#{$lib-name}-scrollbar:hover::-webkit-scrollbar-thumb {
  background: $border-color-base;
}

.#{$lib-name}-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.#{$lib-name}-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
  border-radius: 2px;
  margin: 4px 0;
}

.#{$lib-name}-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0);
  border-radius: 2px;
}

/* 弹出层箭头样式 */
$dark-arrow-height: 4px;
// 三角形宽的一半
$dark-arrow-width-half: 6px;

$light-arrow-offset: 1px;
$light-arrow-height: $light-arrow-offset + $dark-arrow-height;
$light-arrow-width-half: $light-arrow-offset + $dark-arrow-width-half;

// 大号箭头
$dark-arrow-height-large: 6px;
$dark-arrow-width-half-large: 8px;
$light-arrow-height-large: $light-arrow-offset + $dark-arrow-height-large;
$light-arrow-width-half-large: $light-arrow-offset + $dark-arrow-width-half-large;

$arrow-color: rgba($title-color-light, 0.95);

.#{$lib-name}-popper-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 500;
}

.dark {
  &[x-placement^="top"] {
    margin-bottom: $dark-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      bottom: -$dark-arrow-height;
      border-width: $dark-arrow-height $dark-arrow-width-half 0 $dark-arrow-width-half;
      border-color: $arrow-color transparent transparent transparent;
      &.large {
        bottom: -$dark-arrow-height-large;
        border-width: $dark-arrow-height-large $dark-arrow-width-half-large 0 $dark-arrow-width-half-large;
      }
    }
  }
  &[x-placement^="bottom"] {
    margin-top: $dark-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      top: -$dark-arrow-height;
      border-width: 0 $dark-arrow-width-half $dark-arrow-height $dark-arrow-width-half;
      border-color: transparent transparent $arrow-color transparent;
      &.large {
        top: -$dark-arrow-height-large;
        border-width: 0 $dark-arrow-width-half-large $dark-arrow-height-large $dark-arrow-width-half-large;
      }
    }
  }
  &[x-placement^="right"] {
    margin-left: $dark-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      left: -$dark-arrow-height;
      border-width: $dark-arrow-width-half $dark-arrow-height $dark-arrow-width-half 0;
      border-color: transparent $arrow-color transparent transparent;
      &.large {
        left: -$dark-arrow-height-large;
        border-width: $dark-arrow-width-half-large $dark-arrow-height-large $dark-arrow-width-half-large 0;
      }
    }
  }
  &[x-placement^="left"] {
    margin-right: $dark-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      right: -$dark-arrow-height;
      border-width: $dark-arrow-width-half 0 $dark-arrow-width-half $dark-arrow-height;
      border-color: transparent transparent transparent $arrow-color;
      &.large {
        right: -$dark-arrow-height-large;
        border-width: $dark-arrow-width-half-large 0 $dark-arrow-width-half-large $dark-arrow-height-large;
      }
    }
  }
}

.light {
  .#{$lib-name}-popper-arrow:after {
    display: block;
    z-index: 501;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
  }
  &[x-placement^="top"] {
    margin-bottom: $light-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      bottom: -$light-arrow-height;
      border-width: $light-arrow-height $light-arrow-width-half 0 $light-arrow-width-half;
      border-color: $border-color-base transparent transparent transparent;
      &::after {
        bottom: $light-arrow-offset;
        left: -$dark-arrow-width-half;
        border-width: $dark-arrow-height $dark-arrow-width-half 0 $dark-arrow-width-half;
        border-color: $background-color-base transparent transparent transparent;
      }
      &.large {
        bottom: -$light-arrow-height-large;
        border-width: $light-arrow-height-large $light-arrow-width-half-large 0 $light-arrow-width-half-large;
        &::after {
          left: -$dark-arrow-width-half-large;
          border-width: $dark-arrow-height-large $dark-arrow-width-half-large 0 $dark-arrow-width-half-large;
        }
      }
    }
  }
  &[x-placement^="bottom"] {
    margin-top: $light-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      top: -$light-arrow-height;
      border-width: 0 $light-arrow-width-half $light-arrow-height $light-arrow-width-half;
      border-color: transparent transparent $border-color-base transparent;
      &::after {
        top: $light-arrow-offset;
        left: -$dark-arrow-width-half;
        border-width: 0 $dark-arrow-width-half $dark-arrow-height $dark-arrow-width-half;
        border-color: transparent transparent $background-color-base transparent;
      }
      &.large {
        top: -$light-arrow-height-large;
        border-width: 0 $light-arrow-width-half-large $light-arrow-height-large $light-arrow-width-half-large;
        &::after {
          left: -$dark-arrow-width-half-large;
          border-width: 0 $dark-arrow-width-half-large $dark-arrow-height-large $dark-arrow-width-half-large;
        }
      }
    }
  }
  &[x-placement^="right"] {
    margin-left: $light-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      left: -$light-arrow-height;
      border-width: $light-arrow-width-half $light-arrow-height $light-arrow-width-half 0;
      border-color: transparent $border-color-base transparent transparent;
      &::after {
        left: $light-arrow-offset;
        top: -$dark-arrow-width-half;
        border-width: $dark-arrow-width-half $dark-arrow-height $dark-arrow-width-half 0;
        border-color: transparent $background-color-base transparent transparent;
      }
      &.large {
        left: -$light-arrow-height-large;
        border-width: $light-arrow-width-half-large $light-arrow-height-large $light-arrow-width-half-large 0;
        &::after {
          top: -$dark-arrow-width-half-large;
          border-width: $dark-arrow-width-half-large $dark-arrow-height-large $dark-arrow-width-half-large 0;
        }
      }
    }
  }
  &[x-placement^="left"] {
    margin-right: $light-arrow-height;
    & > .#{$lib-name}-popper-arrow {
      right: -$light-arrow-height;
      border-width: $light-arrow-width-half 0 $light-arrow-width-half $light-arrow-height;
      border-color: transparent transparent transparent $border-color-base;
      &::after {
        right: $light-arrow-offset;
        top: -$dark-arrow-width-half;
        border-width: $dark-arrow-width-half 0 $dark-arrow-width-half $dark-arrow-height;
        border-color: transparent transparent transparent $background-color-base;
      }
      &.large {
        right: -$light-arrow-height-large;
        border-width: $light-arrow-width-half-large 0 $light-arrow-width-half-large $light-arrow-height-large;
        &::after {
          top: -$dark-arrow-width-half-large;
          border-width: $dark-arrow-width-half-large 0 $dark-arrow-width-half-large $dark-arrow-height-large;
        }
      }
    }
  }
}

/* Spin 动画 */
.sk-fading-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: $primary-color;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}