@use "sass:math";

@import '~styles/config';

.invoiceList {
  @include grid-col;

  &__title {
    width: 100%;

    font-size: 32px;
    font-family: $font-heading;
    font-weight: 700;

    &.viewBox {
      margin-bottom: $gutter;
    }
  }

  &__header {
    display: flex;
    margin: 0 math.div($gutter, -2);
    padding: $gutter*0.5 0;

    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $color-grey100;

    @include responsive-font(13, 14);
    font-weight: 500;
    color: $color-grey500;

    @media (min-width: $min-tablet) {
      padding: $gutter 0;
    }
  }

  &__titles {
    display: flex;

    padding: 0 $gutter*0.5;
    width: calc(100% - 40px);
  }

  &__month {
    @include colorify('color');

    width: percentage(math.div(6, 12));

    font-family: $font-heading;
    font-weight: 500;

    transition: color 120ms ease-in;
    hyphens: auto;
  }

  &__status {
    width: percentage(math.div(3, 12));
  }

  &__amount {
    width: percentage(math.div(3, 12));
    text-align: right;
  }

  &__items {
    @include grid-row;
    flex-wrap: nowrap;

    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &.viewBox {
      flex-direction: row;
      flex-wrap: wrap;
    }

    &.empty {
      justify-content: center;
      align-items: center;
    }
  }

}