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

.shippingBox {
  position: relative;
  .size(@w: 100%, @h:100%);
  min-height: 383px;

  > div:nth-child(1) {
    .size(@w: inherit, @h: inherit);
  }

  ul {
    display: flex;
    align-items: center;
    height: inherit;

    .itemContainer {
      .size(@w: 444px, @h: 348px);
      background-color: @BG_COLOR_05;
      border-radius: 12px;
      padding: 32px 30px;
      position: relative;
      margin-right: 12px;
      flex: none;
      .checkBox {
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .title {
        color: @COLOR_GRAY06;
        font-weight: bold;
        font-size: 36px;
        margin-bottom: 19px;
      }

      .addressWrap {
        color: @COLOR_GRAY03;
        line-height: 1.33;
        margin-bottom: 37px;
        font-size: 24px;
      }

      .cardFooter {
        font-weight: bold;
        font-size: 24px;
        color: @COLOR_GRAY03;

        .callNumber {
          padding-left: 42px;
          margin-bottom: 6px;

          > span {
            background-image: url("../../../../assets/images/icons/ic-gr-call.svg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            .size(@w: 36px, @h: 36px);
            position: absolute;
            left: 30px;
          }
        }

        .email {
          padding-left: 42px;

          > span {
            background-image: url("../../../../assets/images/icons/ic-gr-mail-36.svg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            .size(@w: 36px, @h: 36px);
            position: absolute;
            left: 30px;
          }
        }
      }

      &:focus {
        &::after {
          .focused(@boxShadow: 22px, @borderRadius: 12px);
        }
      }
    }
  }
}
