<header class="layout">
  <mat-toolbar>
    <mat-icon aria-hidden="false" aria-label="Home" routerLink="/">home</mat-icon>
    <span fxFlex="1 1 auto"></span>
    <shopping-cart-icon></shopping-cart-icon>
    <mat-icon class="checkout" aria-hidden="false" aria-label="Checkout" routerLink="/checkout">arrow_forward</mat-icon>
  </mat-toolbar>
</header>
<section class="main-child-view">
  <router-outlet></router-outlet>
</section>

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

//
// Base Layout
:host {
  display: block;
  height: 100vh;
}

header.layout {
  -moz-box-shadow:    2px -5px 6px 5px $gray;
  -webkit-box-shadow: 2px -5px 6px 5px $gray;
  box-shadow:         2px -5px 6px 5px $gray;

  mat-icon {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    &:hover {
      cursor: pointer;
    }
  }
}

mat-icon.checkout {
  margin-left: 1rem;
}

.main-child-view {
  height: calc(100vh - #{$header-height});
  overflow-y: auto;
}

/**
 * @description   Styling of the Shopping-Cart as a Drop-Down Menu (as of writing, layout's header)
 */

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

// So we're not wrapping this one with a parent element to restrict the styling to the component (view) since this component's instance will be injected in a overlay, separate to that view component
shopping-cart {
  width: 16rem;  
  article {
    background-color: $white;
    border: .05rem solid $primary;
    border-radius: .25rem;
    padding: .75rem .5rem;
  }
  
  ul {
    list-style: none;
    padding: 0;
    li {
      margin-bottom: .1rem;
      .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;
      }
    }
  }
}