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

.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;
  }
}