<section class="checkout-view">
  <article fxLayoutAlign="space-around" fxLayout.lt-sm="column">
    <div>
      <h2>Your Books for Checkout</h2>
      <shopping-cart ui="checkout"></shopping-cart>
    </div>
    <div>
      <h2>Fill in:</h2>
      <checkout-user-form></checkout-user-form>
    </div>
  </article>
  <article fxLayoutAlign="center">
    <checkout-submit-button></checkout-submit-button>
  </article>
</section>

@import '../../../../../styles/colors';

.checkout-view {
  padding: 2rem;
}

shopping-cart {
  article {
    margin-bottom: 1rem;
  }
}

checkout-user-form {
  .mat-form-field-infix {
    width: 15rem;
  }
}

checkout-submit-button {
  button[color="primary"] {
    margin-top: 4rem;
    width: 16rem;
    height: 4rem;
    font-size: 1.5rem;
    span {
      color: $white;
    }
  }
}

/**
 * @description   Styling of the Shopping-Cart as a part of the Checkout page
 */

 @import '../../../../../../styles/colors';

// @todo @future consider making a mixin of shopping-cart's checkout style or other SCSS techniques of abstraction to gain more flexbility. Open to suggestion!
.checkout-view {
  shopping-cart {
    // width: 100%;  
    article {
      background-color: $transparent;
      border: none;
      padding: 0;
      margin-top: 1rem;
    }
    
    ul {
      list-style: none;
      padding: 0;
      li {
        margin-bottom: .5rem;
        .author {
          margin-top: .25rem;
        }
        .close {
          width: auto;
          height: auto;
          font-size: .8rem;
          margin-left: 1rem;
          margin-right: .25rem;
          &:hover {
            cursor: pointer;
          }
        }
        .row-number {
          margin-left: .25rem;
          margin-right: .25rem;
        }
      }
    }
  }
}