@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-gallery {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-popup;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &-footer {
    position: absolute;
    bottom: 0;
    width: 100%;

    .info {
      position: relative;
      color: $color-white;
      font-size: $font-size-sm;
      line-height: $line-height-zh;
      text-align: center;
    }

    .index {
      display: inline-block;

      .current,
      .split,
      .total {
        padding: $spacing-h-xs $spacing-v-xs;
      }
    }

    .zoom {
      display: inline-block;
      margin: auto $spacing-v-xs;
      color: $color-grey-2;
      font-size: $font-size-xxs;
    }
  }

  &-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.9);
  }

  &-swiper {
    width: 100%;
    height: 100%;

    .image-wrapper {
      width: 100%;
      height: 100%;
    }

    .taro-img {
      width: 100%;
      height: 100%;

      img {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-slide {
    overflow: hidden;
  }

  &-close {
    position: absolute;
    top: 5px * $hd;
    right: 6px * $hd;
    z-index: 1;
  }

  &-toolbar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    background-color: #000;
    opacity: 0.5;
    white-space: nowrap;

    &--hidden {
      display: none;
    }

    &-item {
      display: inline-block;
      color: #fff;
      margin: 6px * $hd;

      &--hidden {
        display: none;
      }

      &.rotateLeft .at-icon {
        transform: rotate(135deg);
      }

      &.rotateRight .at-icon {
        transform: scaleX(-1) rotate(135deg);
      }
    }
  }
}