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

.container {
  display: flex;
  width: 100%;
  .Wrap {
    margin: 30px 0 0 10px;
    width: 714px;
    height: 560px;
    display: flex;
    .thumbnail {
      .size(@w: 560px, @h: 560px);
      border: solid 1px #dadada;
      background-color: #fff;
      margin: 0 10px 10px 0;
      position: relative;

      &:focus {
        &::after {
          .focused(@boxShadow: 22px, @borderRadius:0px);
        }
      }
    }

    .upButton {
      .size(@w: 144px , @h: 48px);
      border: none;
      margin-bottom: 4px;
      background-position: center;
      background-size: cover;
      background-image: url("../../../../assets/images/btn/btn-bk-up-nor.svg");

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

    .downButton {
      .size(@w: 144px , @h: 48px);
      border: none;
      margin-top: 4px;
      background-position: center;
      background-size: cover;
      background-image: url("../../../../assets/images/btn/btn-bk-down-nor.svg");

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

    .image {
      .size(@w: 144px , @h: 144px);
      margin: 0 0 6px 0;
      border: solid 1px #dadada;
      position: relative;

      &:focus {
        &::after {
          .focused(@boxShadow: 22px, @borderRadius:0px);
        }
      }

      &.selected {
        &:before {
          .size(@w: 142px , @h: 142px);
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          background-color: #7a808d;
          opacity: 0.7;
        }
      }
    }
    .checkIcon {
      .position(@position: absolute, @top: auto, @right: 44px, @bottom: 48px, @left: auto);
      .size(@w: 49px , @h: 49px);

      background-image: url("../../../../assets/images/icons/ic-check-thumb.svg");
      background-position: center;
      background-size: cover;

      z-index: 20;
    }
  }
}
