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

.@{css-prefix} {
  &-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: @base-zindex * 1500 + 2;
    background-color: #000;

    &-head {
      display: flex;
      color: #FFF;
      height: .9rem;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: @base-zindex * 1500 + 3;
      background-color: rgba(0, 0, 0, 0.3);
      transform: translate(0, 0);
      transition: transform .3s;
      > span {
        margin-left: 25%;
        width: 50%;
        text-align: center;
        font-size: .3rem;
      }
      > a {
        display: flex;
        flex: 0 0 25%;
        height: inherit;
        justify-content: flex-end;
        align-items: center;
        padding-right: .24rem;
        font-size: 13px;
      }
    }

    &-img {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    &-foot {
      transform: translate(0, 0);
      transition: transform .3s;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: #fff;
      z-index: @base-zindex * 1500 + 2;
      background-color: rgba(0, 0, 0, 0.3);
      padding: .24rem;
    }

    &-scroller {
      -webkit-overflow-scrolling: touch;
      max-height: 2rem;
      overflow-y: auto;
      line-height: .34rem;
    }

    &-up-hide {
      transform: translate(0, -100%);
    }

    &-down-hide {
      transform: translate(0, 100%);
    }

    &-loading {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 0;
      margin-left: -15px;
      margin-top: -15px;
    }
  }
}