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

.bgLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 11;
}

.container {
  position: fixed;
  right: 0;
  top: 0;
  width: 720px;
  height: 100%;
  background-color: #2c343f;
  z-index: 12;

  .titleBox {
    display: flex;
    padding: 60px 30px 18px;
    border-bottom: 1px solid #d9d9d9;

    .backButton {
      background-image: url("../../../../assets/images/btn/btn-wh-arrow-left-nor.svg");
      width: 48px;
      height: 48px;
      object-fit: cover;
      background-repeat: no-repeat;

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

    .title {
      .font(@fontFamily: @arialFontBold, @fontSize: 42px);
      line-height: 1.14;
      color: @BG_COLOR_01;
    }
  }

  .orderItemListsWrap {
    .size(@w: 100%, @h: 100%);
    margin-top: 30px;

    .grid {
      padding: 0 30px;
    }
  }
}
