@import "~taro-ui/dist/style/components/icon.scss";

.house-cart {

  .head {
    margin: 30px 0;
    padding: 0 30px;
    font-size:24px;

    .tip {
      color:#666;
      line-height:36px;
    }

    .actions {
      margin-top: 20px;

      .action {
        display: inline-block;
        color:#333;
        background:#fff;
        line-height:48px;
        padding: 0 24px;
        border:1px solid #E4E4E4;
        border-radius: 24px;
  
        &.active {
          color:#fff;
          background:#BB9C79;
          border:1px solid #BB9C79;
          box-shadow:0px 4px 12px 0px rgba(255,171,50,0.08);
        }
  
        & + .action {
          margin-left: 30px;
        }
      }
    }
  }

  .body {
    height: calc(100% - 340px);
  }

  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #fff;
    z-index: 10;
    text-align: center;
    padding: 0 30px 30px;

    .btn {
      font-size: 36px;
      color: #fff;
      height: 94px;
      line-height: 94px;
      background: #BB9C79;
      border-radius: 10px;

      &.nodata {
        background:#000;
        opacity:0.6;
      }
    }
  }

  .shoping-cart {
    position: absolute;
    bottom: 125px;
    font-size: 28px;
    line-height: 30px;
    color: #333;
    width: calc(100% - 70px);
    box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    border-radius:44px 44px 0px 0px;
    background-color: #fff;

    .title {
      text-align: center;
      font-size: 24px;

      .at-icon {
        display: inline-block;
        margin-left: 20px;
      }
    }

    .choose-list {
      padding: 30px;
      overflow: hidden;

      .choose-item {
        display: flex;
        
        &-body {
          text-align: left;
          flex: auto;
        }

        &-action {
          width: 30px;
          flex: none;
          text-align: right;
        }

        & + .choose-item {
          margin-top: 24px;
        }
      }
    }
  }

  .collapse {
    .on {
      &.title {
        height: 64px;
        padding: 20px 0;
      }

      &.choose-list{
        height: auto;
      }
    }

    .off {
      &.title {
        padding: 40px 0;
        height: 100px;
      }

      &.choose-list {
        height: 0;
        padding: 0;
      }
    }
  }

}