@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 {
        border-radius: 0;
        .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: 10px;
        .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: 10px;
          .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@3x.png);
      background-size: 486px 858px;
      background-position: left top;
      border-radius: 10px;
      padding: 73px 36px 0;
      &.ru {
        .productInfo {
          .todaysDealTitle {
            font-size: 58px;
            line-height: 60px;
            font-family: @arialFontBold;
          }
        }
      }
      &.de {
        .productInfo {
          .todaysDealTitle {
            font-size: 59px !important;
            line-height: 63px !important;
            letter-spacing: -1px !important;
          }
        }
      }
      .productInfo {
        margin-bottom: 33px;
        .todaysDealTitle {
          .size(@w:100%,@h:132px);
          font-size: 76px;
          word-break: break-word;
          font-stretch: normal;
          color: #151515;
          text-align: center;
          line-height: 76px;
          font-family: @arialFontBold;
        }
        .textBox {
          .size(@w: 100%, @h: 80px);
          margin-top: 71px;
          .elip(@clamp:2);
          font-weight: bold;
          font-size: 30px;
          color: @COLOR_GRAY06;
          line-height: 1.27;
          margin-bottom: 6px;
        }
        .accBox {
          width: 100%;
          text-align: center;
          font-weight: bold;
          font-size: 42px;
          color: @PRIMARY_COLOR_RED;
          line-height: 1.14;
          display: inline-block;
          .elip(@clamp:1);
          > strong {
            width: 260px;
            font-size: 30px;
            line-height: 1.27;
            display: block;
            .elip(@clamp:2);
          }
          .saleAccBox {
            font-weight: normal;
            font-size: 24px;
            color: @COLOR_GRAY04;
            vertical-align: middle;
            text-decoration: line-through;
            margin-left: 9px;
          }
        }
      }
      .itemImgBox {
        > img {
          .size(@w: 356px, @h: 356px);
          border-radius: 0;
        }
      }
      &.isHorizontal {
        background-image: url(../../../../assets/images/img-home-banner-td-hor@3x.png);
        background-size: 744px 420px;
        background-position: center center;
        display: flex;
        padding: 0 30px 0 0;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        > div {
          flex: none;
        }
        &.ru {
          .productInfo {
            .todaysDealTitle {
              font-size: 58px;
              line-height: 60px;
              font-family: @arialFontBold;
            }
          }
        }
        &.de {
          .productInfo {
            .todaysDealTitle {
              font-size: 59px !important;
              line-height: 63px !important;
              letter-spacing: -2px !important;
            }
          }
        }
        .productInfo {
          margin-bottom: 0;
          .todaysDealTitle {
            .size(@w:305px,@h:114px);
            margin-top: 53px;
            margin-left: 49px;
            font-size: 66px;
            word-break: break-word;
            color: #151515;
            text-align: left;
            line-height: 57px;
            font-family: @arialBlack;
          }
          .textBox {
            .size(@w: 294px, @h: 80px);
            margin: 67px 0 5px 50px;
            text-align: left;
          }
          .accBox {
            .size(@w: 320px, @h: 50px);
            margin-left: 50px;
            text-align: left;
            display: block;
            .elip(@clamp:1);
          }
          .saleAccBox {
            color: #767676;
            display: block;
            text-align: left;
            margin: 5px 0 0 55px;
            text-decoration: line-through;
          }
        }
        .itemImgBox {
          .position(@position: absolute, @top: 47px, @left: 389px);
          .size(@w: 326px, @h: 326px);
          > img {
            .size(@w: inherit, @h: inherit);
          }
        }
      }
    }
    &:focus {
      &::after {
        .focused(@boxShadow:22px, @borderRadius: 12px);
        border: 6px solid @PRIMARY_COLOR_RED;
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
      }
    }
    &.justforyou {
      background-image: url(../../../../assets/images/img-home-banner-jfy-ver@3x.png);
      background-size: 486px 858px;
      background-position: left top;
      border-radius: 10px;
      padding: 75px 51px 0;
      &.ru {
        .productInfo {
          .justforyouTitle {
            font-size: 58px;
            line-height: 60px;
            font-family: @arialFontBold;
          }
        }
      }
      &.de {
        .productInfo {
          .justforyouTitle {
            font-size: 74px !important;
            line-height: 63px !important;
            letter-spacing: -1px !important;
          }
        }
      }
      .productInfo {
        margin-bottom: 31px;
        .justforyouTitle {
          .size(@w:100%,@h:132px);
          font-family: Arial;
          font-weight: bold;
          font-size: 80px;
          word-break: break-word;
          font-stretch: normal;
          color: #151515;
          text-align: center;
          line-height: 76px;
          font-family: @arialFontBold;
        }
        .textBox {
          .size(@w: 100%, @h: 80px);
          margin-top: 71px;
          .elip(@clamp:2);
          font-weight: bold;
          font-size: 30px;
          color: @COLOR_GRAY06;
          line-height: 1.27;
          margin-bottom: 6px;
        }
        .accBox {
          width: 100%;
          text-align: center;
          font-weight: bold;
          font-size: 42px;
          color: @PRIMARY_COLOR_RED;
          line-height: 1.14;
          display: inline-block;
          .elip(@clamp:1);
          > strong {
            width: 260px;
            font-size: 30px;
            line-height: 1.27;
            display: block;
            .elip(@clamp:2);
          }
          .saleAccBox {
            font-weight: normal;
            font-size: 24px;
            color: @COLOR_GRAY04;
            vertical-align: middle;
            text-decoration: line-through;
            margin-left: 9px;
            display: inline-block;
          }
        }
      }
      .itemImgBox {
        > img {
          .size(@w: 356px, @h: 356px);
          border-radius: 12px;
          border:6px solid #DCB9A1;
          box-sizing: content-box;
        }
      }
      &.isHorizontal {
        background-image: url(../../../../assets/images/img-home-banner-jfy-hor@3x.png);
        background-size: 744px 420px;
        background-position: center center;
        display: flex;
        padding: 0 30px 0 0;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        > div {
          flex: none;
        }
        &.ru {
          .productInfo {
            .justforyouTitle {
              font-size: 58px;
              line-height: 60px;
              font-family: @arialFontBold;
            }
          }
        }
        &.de {
          .productInfo {
            .justforyouTitle {
              font-size: 59px !important;
              line-height: 63px !important;
              letter-spacing: -2px !important;
            }
          }
        }
        .productInfo {
          margin-bottom: 0;
          .justforyouTitle {
            .size(@w:305px,@h:114px);
            margin-top: 53px;
            margin-left: 49px;
            font-size: 66px;
            word-break: break-word;
            color: #151515;
            text-align: left;
            line-height: 57px;
            font-family: @arialBlack;
          }
          .textBox {
            .size(@w: 294px, @h: 80px);
            margin: 67px 0 5px 50px;
            text-align: left;
          }
          .accBox {
            .size(@w: 320px, @h: 50px);
            margin-left: 50px;
            text-align: left;
            display: block;
            .elip(@clamp:1);
          }
          .saleAccBox {
            color: #767676;
            display: block;
            text-align: left;
            margin: 5px 0 0 55px;
            text-decoration: line-through;
          }
        }
        .itemImgBox {
          .position(@position: absolute, @top: 47px, @left: 389px);
          .size(@w: 326px, @h: 326px);
          > img {
            .size(@w: inherit, @h: inherit);
            border-radius: 12px;
            border:6px solid #DCB9A1;
            box-sizing: content-box;
          }
        }
      }
    }
  }

  .arrow {
    z-index: 9999;
    .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: 10px;
    .arrow {
      &.leftBtn {
        .position(@position: absolute, @top: 189px, @left: 18px);
      }
      &.rightBtn {
        .position(@position: absolute, @top: 189px, @right: 18px);
      }
    }
  }
}

.hideFocusRing {
  &:focus,
  &:focus-within {
    &::after {
      content: none;
      border: 0 !important;
      box-shadow: none !important;
    }
  }
}

// .videoModal {
//   &::after {
//     .focused(@boxShadow:0, @borderRadius: 12px);
//     border: 6px solid @PRIMARY_COLOR_RED;
//     top: -4px;
//     right: -4px;
//     bottom: -4px;
//     left: -4px;
//   }
// }

// 비디오 재생 모달 컨테이너에 강제 포커스 테두리 제거
.videoModal {
  &:focus,
  &:focus-within {
    &::after {
      content: none;
      border: 0;
      box-shadow: none;
    }
  }
}