@import '~scss/variables';

// screenshots picture setting
$picture-width: 200px;
$picture-height: 160px;
$picture-margin: 10px;
$picture-length: 3;

// color
$N30: #d5dae5;
$N75: #8c96ad;

@keyframes fadeIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.slider {
  position: relative;
  margin-bottom: 46px;
  font-size: 12px;

  .pre,
  .next {
    position: absolute;
    display: inline-block;
    width: 18px;
    bottom: 68px;
    cursor: pointer;

    &:hover {
      svg {
        --primary-color: #{$primary};
        --secondary-color: #{$primary};
      }

      .disabled {
        cursor: not-allowed;
        svg {
          --primary-color: #{$N75};
          --secondary-color: #{$N75};
        }
      }
    }
  }
  .next {
    right: 10px;
  }

  .dotList {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    text-align: center;
    .dot {
      display: inline-block;
      margin: 0 4px;
      width: 24px;
      height: 20px;
      cursor: pointer;
      >span{
        display: inline-block;
        width: 100%;
        height: 2px;
        background-color: $N30;
        &.active {
          background-color: $primary;

        }
      }
    }
  }

  .listOuter {
    position: relative;
    margin: 0 auto;
    width: ($picture-width + $picture-margin) * $picture-length;
    height: $picture-height;
    overflow: hidden;

    .pictureList {
      position: absolute;
      left: 0;
      bottom: 0;
      transition: all 0.5s ease-in-out;
    }
  }

  .pictureOuter {
    float: left;
    width: $picture-width + $picture-margin;
    height: $picture-height;
    background-color: #fff;

    .picture {
      display: flex;
      justify-content: center;
      align-items: center;
      width: $picture-width;
      height: $picture-height;
      padding: 8px;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      cursor: pointer;
    }
  }
}

.overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 201;
  background-color: rgba(#000, 0.8);

  .viewCont {
    position: relative;
    top: 100px;
    display: flex;

    .overlayPic {
      margin: 0 auto;
      height: 600px;
      line-height: 600px;
      > img {
        width: auto;
        height: auto;
        max-width: 1000px;
        animation-name: fadeIn;
        animation-duration: .5s;
        //transition: all .5s ease-in-out;
      }
    }

    .pre {
      :global {
        .icon {
          position: fixed;
          float: left;
          top: 50%;
          left: 10px;
          cursor: pointer;
        }
      }
    }

    .next {
      :global {
        .icon {
          position: fixed;
          float: right;
          top: 50%;
          right: 10px;
          cursor: pointer;
        }
      }
    }
  }

  .closeOverlay {
    float: right;
    position: fixed;
    top: $header-height + 10px;
    right: 20px;
    z-index: 2;
    width: 24px;
    height: 24px;
    background: #c1c0c0;
    border-radius: 50%;
    cursor: pointer;
  }
}
