@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.thumbnailIndicator {
  width: 100%;
  margin-top: auto;
  position: absolute;
  bottom: -5px;
  margin-bottom: 30px;
  z-index: 22;
  text-align: center;

  .prevButton {
    .size(@w:42px, @h: 42px);
    .position(@position: absolute, @left: 190px, @bottom: 0 , @top: 0);
    background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
    background-position: center;
    background-size: cover;

    &:focus {
      background-image: url("../../../../../assets/images/btn/btn-prev-thumb-foc.svg");
    }

    &.disable {
      opacity: 0.1;
      background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
    }
  }
  .nextButton {
    .size(@w:42px, @h: 42px);
    .position(@position: absolute, @right: 190px, @bottom: 0 , @top: 0);
    background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
    background-position: center;
    background-size: cover;

    &:focus {
      background-image: url("../../../../../assets/images/btn/btn-next-thumb-foc.svg");
    }
    &.focused {
      background-image: url("../../../../../assets/images/btn/btn-next-thumb-foc.svg");
    }
    &.disable {
      opacity: 0.1;
      background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
    }
  }

  //soldout
  > h3 {
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 237px;
  }
  > span {
    // .size(@w: 51px , @h: 21px);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
    color: #222222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.33;
  }
}
