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

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

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

  .sideCoupon {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #d9d9d9;

    .right {
      height: 42px;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      line-height: 42px;
    }
    .left {
      height: 42px;
      display: flex;
      font-size: 24px;
      font-weight: normal;
      color: #ccc;
      line-height: 42px;
      align-items: center;
    }
  }
  .sideItemList {
    padding: 30px;
    .size(@w: 100%, @h: 100%);

    .sideItemTitle {
      font-size: 30px;
      color: #fff;
      font-weight: bold;
      width: 660px;
      height: 42px;
      margin-bottom: 12px;
    }
  }
}
