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

.rollingWrap {
  position: relative;
  .itemBox {
    .size(@w: 486px, @h: 858px);
    position: relative;
    text-align: center;
    .brandIcon {
      overflow: hidden;
      position: absolute;
      right: 30px;
      bottom: 30px;
      > img {
        .size(@w: 60px, @h: 60px);
      }
    }
    .liveIcon {
      z-index: 2;
      position: absolute;
      left: 18px;
      top: 18px;
      > img {
        .size(@w: 108px, @h: 48px);
      }
    }
    .imgBanner {
      > img {
        border-radius: 12px;
        .size(@w: 486px, @h: 858px);
      }
    }
    .btnPlay {
      .size(@w: 100%, @h: 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      > img {
        .size(@w: 120px, @h: 120px);
      }
    }
    &.isHorizontal {
      .size(@w: 744px, @h: 420px);
      .imgBanner {
        > img {
          border-radius: 12px;
          .size(@w: 744px, @h: 420px);
        }
      }
    }
    .errorContents {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .errorlogo {
        width: 120px;
        height: 120px;
        object-fit: cover;
      }

      .errorText {
        margin-top: 30px;
        color: #ff0000;
        padding-top: 10px;
      }
    }

    &.todaysDeals {
      background-image: url(../../../../assets/images/img_home_banner_td_ver.png);
      background-size: 486px 858px;
      background-position: left top;
      border-radius: 12px;
      padding: 268px 36px 0;
      .productInfo {
        margin-bottom: 33px;
        .textBox {
          .size(@w: 100%, @h: 80px);
          .elip(@clamp:2);
          font-weight: bold;
          font-size: 30px;
          color: @COLOR_GRAY06;
          line-height: 1.27;
          margin-bottom: 6px;
        }
        .accBox {
          height: 50px;
          font-weight: bold;
          font-size: 42px;
          color: @PRIMARY_COLOR_RED;
          line-height: 1.14;
          display: inline-block;
        }
        .saleAccBox {
          font-weight: normal;
          font-size: 24px;
          color: @COLOR_GRAY04;
          vertical-align: middle;
          text-decoration: line-through;
          margin-left: 9px;
        }
      }
      .itemImgBox {
        > img {
          .size(@w: 354px, @h: 354px);
        }
      }
      &.isHorizontal {
        background-image: url(../../../../assets/images/img_home_banner_td_hor.png);
        background-size: 744px 420px;
        background-position: center center;
        display: flex;
        padding: 0 30px 0 0;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -o-border-radius: 12px;
        > div {
          flex: none;
        }
        .productInfo {
          margin-bottom: 0;
          .textBox {
            .size(@w: 294px, @h: 80px);
            margin: 234px 0 5px 50px;
            text-align: left;
          }
          .accBox {
            .size(@w: 320px, @h: 50px);
            margin-left: 50px;
            text-align: left;
            display: block;
          }
          .saleAccBox {
            color: #767676;
            display: block;
            text-align: left;
            margin: 5px 0 0 55px;
          }
        }
        .itemImgBox {
          margin: 47px 0 0 8px;
          > img {
            .size(@w: 324px, @h: 324px);
          }
        }
      }
    }
    &:focus {
      &::after {
        .focused(@boxShadow:22px, @borderRadius: 12px);
      }
    }
  }

  .arrow {
    z-index: 10;
    .size(@w: 42px, @h: 42px);
    background-size: 42px 42px;
    background-position: center center;
    &.leftBtn {
      .position(@position: absolute, @top: 406px, @left: 18px);
      background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
      &:focus {
        background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
      }
    }
    &.rightBtn {
      .position(@position: absolute, @top: 406px, @right: 18px);
      background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
      &:focus {
        background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
      }
    }
  }

  &.isHorizontalWrap {
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
    .arrow {
      &.leftBtn {
        .position(@position: absolute, @top: 189px, @left: 18px);
      }
      &.rightBtn {
        .position(@position: absolute, @top: 189px, @right: 18px);
      }
    }
  }
}

article[role="region"] {
  > section {
    > div:first-child {
      > div:first-child {
        > div:first-child {
          &.videoModal {
            border-radius: 12px;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            -o-border-radius: 12px;
            overflow: hidden !important;
            &::after {
              .focused(@boxShadow:0, @borderRadius: 12px);
            }
            > div:first-child {
              border-radius: 12px;
              -webkit-border-radius: 12px;
              -moz-border-radius: 12px;
              -o-border-radius: 12px;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}