@use "sass:math";

@import '~styles/config';

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

  &__header {
    display: flex;
    padding: $gutter 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 (max-width: $max-mobile) {
      display: none;
    }
  }

  &__title {
    width: 100%;

    @media (min-width: $min-mobile) {
      display: flex;
    }
  }

  &__date {
    @media (min-width: $min-mobile) {
      padding: 0 20px;
      width: percentage(math.div(3, 12));
    }
  }

  &__refills {
    @media (min-width: $min-mobile) {
      padding: 0 20px;
      width: percentage(math.div(7, 12));
    }
    @media (min-width: $min-tablet) {
      width: percentage(math.div(4, 12));
    }
  }

  &__type {
    display: none;
    @media (min-width: $min-tablet) {
      display: block;
      padding: 0 20px;
      width: percentage(math.div(3, 12));
    }
  }

  &__amount {
    @media (min-width: $min-mobile) {
      display: block;
      margin: 0 20px;
      padding: 0;
      width: percentage(math.div(2, 12));
      text-align: right;
    }
  }
}