@use "sass:math";

@import '~styles/config';

.summaryList {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  margin-bottom: $gutter*2;

  &__inner {
    position: relative;

    z-index: 4;
    height: 100%;

    @media (min-width: $min-desktop) {
      &::after {
        content: '';

        position: absolute;
        top: 90px;
        bottom: -60px;
        left: percentage(math.div(1, 12));
        z-index: 1;

        width: calc(100% - #{$gutter});

        pointer-events: none;

        opacity: 0.2;
        background: url('/assets/black-dot-opaque.svg') repeat;
        background-size: 10px;
      }
    }
  }

  &__shadow {
    position: relative;
    height: 100%;

    @media (min-width: $min-desktop) {
      &::after {
        content: '';

        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;

        height: 60px;

        box-shadow: 0 3px 65px 0 rgba(32, 32, 32, 0.125);
      }
    }
  }

  &__background {
    position: relative;
    z-index: 5;

    padding: 0 15px;
    height: 100%;

    background-color: #fff;

    @media (min-width: $min-desktop) {
      padding: 0 calc(#{percentage(math.div(1, 12))} + 15px);
    }
  }

  &__header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    @media (min-width: $min-tablet) {
      flex-direction: row;
      align-items: center;

      margin-top: -$gutter;
    }
  }

  &__title {
    order: 2;
    margin-top: $gutter*0.5;

    @include responsive-font(22, 32);
    font-family: $font-heading;
    font-weight: 600;

    @media (min-width: $min-tablet) {
      order: 1;
      margin: 0;
      width: calc(100% - 325px);
    }
  }

  &__datePicker {
    display: flex;
    order: 1;

    height: $sticky-height-mobile;

    @media (min-width: $min-tablet) {
      order: 2;
      height: $sticky-height;
      width: 325px;
    }

    > div {
      width: 100%;
    }
  }

  &__total {
    @include grid-row;
    justify-content: space-between;
    padding-bottom: $gutter;
  }

  &__label,
  &__amount {
    @include grid-col(percentage(math.div(6, 12)));
    padding-top: $gutter;
    padding-bottom: $gutter;

    font-weight: 700;
    font-size: 18px;
  }

  &__amount {
    text-align: right;
  }
}