@import "../common/variables";
@import "../common/vars";

.@{css-prefix} {
  &-loading &-spinner {
    display: block;

    margin: 0 auto
  }

  &-spinner {
    display: inline-block;

    width: 48rpx;
    height: 48rpx;

    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: spinner-spin 1s step-end infinite;
    animation: spinner-spin 1s step-end infinite
  }

  &-spinner:after {
    display: block;

    width: 100%;
    height: 100%;

    content: '';

    background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%
  }

  &-spinner-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>")
  }

  @-webkit-keyframes spinner-spin {
    0% {
      -webkit-transform: rotate(0deg)
    }

    8.33333333% {
      -webkit-transform: rotate(30deg)
    }

    16.66666667% {
      -webkit-transform: rotate(60deg)
    }

    25% {
      -webkit-transform: rotate(90deg)
    }

    33.33333333% {
      -webkit-transform: rotate(120deg)
    }

    41.66666667% {
      -webkit-transform: rotate(150deg)
    }

    50% {
      -webkit-transform: rotate(180deg)
    }

    58.33333333% {
      -webkit-transform: rotate(210deg)
    }

    66.66666667% {
      -webkit-transform: rotate(240deg)
    }

    75% {
      -webkit-transform: rotate(270deg)
    }

    83.33333333% {
      -webkit-transform: rotate(300deg)
    }

    91.66666667% {
      -webkit-transform: rotate(330deg)
    }

    100% {
      -webkit-transform: rotate(360deg)
    }
  }

  @keyframes spinner-spin {
    0% {
      transform: rotate(0deg)
    }

    8.33333333% {
      transform: rotate(30deg)
    }

    16.66666667% {
      transform: rotate(60deg)
    }

    25% {
      transform: rotate(90deg)
    }

    33.33333333% {
      transform: rotate(120deg)
    }

    41.66666667% {
      transform: rotate(150deg)
    }

    50% {
      transform: rotate(180deg)
    }

    58.33333333% {
      transform: rotate(210deg)
    }

    66.66666667% {
      transform: rotate(240deg)
    }

    75% {
      transform: rotate(270deg)
    }

    83.33333333% {
      transform: rotate(300deg)
    }

    91.66666667% {
      transform: rotate(330deg)
    }

    100% {
      transform: rotate(360deg)
    }
  }

  &-android &-modal &-bar-nav~&-content {
    padding-top: 0
  }

  &-swiper {
    position: relative;
    z-index: 1;

    overflow: hidden;

    width: 100%
  }

  &-swiper &-segmented-control&-segmented-control-inverted &-control-item&-active {
    border-bottom: 0
  }

  &-swiper &-segmented-control&-segmented-control-inverted~&-swiper-group &-swiper-item {
    border-top: 1px solid #c8c7cc;
    border-bottom: 1px solid #c8c7cc
  }

  &-swiper &-swiper-group {
    position: relative;
    width: 100%;
    height: 100%;

    transition: all 0s linear;
    white-space: nowrap;

    font-size: 0;
  }

  &-swiper &-swiper-group &-swiper-item {
    position: relative;

    display: inline-block;

    width: 100%;
    height: 100%;
    overflow-y: auto;

    vertical-align: top;
    white-space: normal;

    font-size: .7rem;
  }

  &-swiper &-swiper-group &-swiper-item>a:not(&-control-item) {
    position: relative;

    display: block;

    line-height: 0;
  }

  &-swiper &-swiper-group &-swiper-item img {
    width: 100%
  }

  &-swiper &-swiper-group &-swiper-item &-table-view:after,
  &-swiper &-swiper-group &-swiper-item &-table-view:before {
    height: 0
  }

  &-swiper &-swiper-group&-swiper-loop {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
  }

  &-swiper-title {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 60rpx;
    margin: 0;

    text-align: left;
    text-indent: 24rpx;

    opacity: .8;
    background-color: #000;

    line-height: 30px;
  }

  &-swiper-indicator {
    position: absolute;
    bottom: 16rpx;

    width: 100%;

    text-align: center;

    background: 0 0
  }

  &-swiper-indicator&-segmented-control {
    position: relative;
    bottom: auto
  }

  &-swiper-indicator &-indicator {
    display: inline-block;

    width: 16rpx;
    height: 16rpx;
    margin: 2rpx 12rpx;

    cursor: pointer;

    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
  }

  &-swiper-indicator &-active&-indicator {
    background: @theme-color;
  }

  &-swiper-indicator &-icon {
    width: 80rpx;
    height: 60rpx;
    margin: 6rpx;

    text-align: center;

    border: 1px solid #ddd;

    font-size: 1rem;
    line-height: 60rpx;
  }

  &-swiper-indicator &-number {
    display: inline-block;

    width: 116rpx;

    line-height: 64rpx;
  }

  &-swiper-indicator &-number span {
    color: #ff5053
  }

  &-swiper-progress-bar {
    z-index: 1;

    height: 4rpx;

    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  &-content&-fade {
    left: 0;

    opacity: 0
  }

  &-content&-fade&-in {
    opacity: 1
  }

  &-content&-sliding {
    z-index: 2;

    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }

  &-content&-sliding&-left {
    z-index: 1;

    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  &-content&-sliding&-right {
    z-index: 3;

    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }


  &-fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  &-fullscreen&-swiper &-swiper-group {
    height: 100%
  }

  &-fullscreen &-segmented-control~&-swiper-group {
    position: absolute;
    top: 60rpx;
    bottom: 0;

    width: 100%;
    height: auto
  }

  &-fullscreen&-swiper &-swiper-item>a {
    top: 50%;

    transform: translateY(-50%)
  }

  &-preview-image&-fullscreen {
    position: fixed;
    z-index: 999;

    background-color: #000;
  }

  &-preview-header,
  &-preview-footer {
    position: absolute;
    z-index: 10;
    left: 0;

    width: 100%;
  }

  &-preview-header {
    top: 0;

    height: 44px;
  }

  &-preview-footer {
    bottom: 0px;

    height: 100rpx;
  }

  &-preview-header &-preview-indicator {
    display: block;

    width: 140rpx;
    margin: 30rpx auto;

    text-align: center;

    color: #fff;
    border-radius: 24rpx;
    background-color: rgba(0, 0, 0, 0.4);

    font-size: .8rem;
    line-height: 50rpx;
  }

  &-preview-image {
    display: none;

    animation-duration: 0.5s;

    animation-fill-mode: both;
  }

  &-preview-image&-preview-in {
    animation-name: fadeIn;
  }

  &-preview-image&-preview-out {
    animation-name: fadeOut;

    background: none;
  }

  &-preview-image&-preview-out &-preview-header,
  &-preview-image&-preview-out &-preview-footer {
    display: none;
  }

  &-zoom-scroller {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    margin: 0;

    -webkit-backface-visibility: hidden;
  }

  &-zoom {
    transform-style: preserve-3d;
  }

  &-swiper &-swiper-group &-swiper-item img {
    width: 100%;
    max-width: 100%; // height: auto;
    // max-height: 100%;
  }

  &-android-4-1 &-swiper &-swiper-group &-swiper-item img {
    width: 100%;
  }

  &-android-4-1 &-swiper&-preview-image &-swiper-group &-swiper-item {
    display: inline-table;
  }

  &-android-4-1 &-swiper&-preview-image &-zoom-scroller img {
    display: table-cell;

    vertical-align: middle;
  }

  &-preview-loading {
    position: absolute;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;
  }

  &-preview-loading&-active {
    display: block;
  }

  &-preview-loading &-spinner-white {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100rpx;
    height: 100rpx;
    margin-top: -50rpx;
    margin-left: -50rpx;
  }

  &-preview-image img&-transitioning {
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }


  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }


  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}