@use "sass:math";

@import '~styles/config';

.refillListItem {
  display: flex;
  flex-direction: column;

  padding: $gutter 0;

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

  transition: background-color 300ms ease-in-out;

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

  &__value {
    padding: 0 20px;

    &.title {
      @include colorify('color');

      display: flex;
      flex-wrap: wrap;

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

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

      @media (min-width: $min-mobile) {
        width: percentage(math.div(3, 12));
      }
    }

    &.refill {
      padding: 0;
      width: 100%;

      font-weight: 500;

      @media (min-width: $min-tablet) {
        margin: 0 20px 0 0;
        width: percentage(math.div(4, 7));
      }
    }

    &.type {
      padding: 0;
      width: 100%;

      @media (min-width: $min-tablet) {
        margin: 0 0 0 20px;
        width: percentage(math.div(3, 7));
      }
    }

    &.total {
      margin: 0 20px;
      padding: 0;
      font-weight: 600;

      .failed & {
        color: $color-grey500;
      }

      @media (min-width: $min-mobile) {
        width: percentage(math.div(2, 12));
        text-align: right;
        white-space: nowrap;
      }
    }
  }

  &__refill {
    padding: 0 20px;

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

  &__date {
    padding-right: 10px;
  }

  &__time {
    white-space: nowrap;
  }

  &__message {
    color: $color-warning;
    white-space: normal;
  }

  // *******************************
  // Styles for RefillListItemLoading
  &.loading &__value {
    height: 18px;
    max-width: 100%;

    &.title {
      @include loadingTextDefault;
      padding: 0;
      margin: 0 20px 7px;
      width: calc(#{percentage(math.div(3, 12))} - 40px);

      @media (max-width: $max-mobile) {
        width: 90px;
        max-width: 90px;
      }
    }

    &.refill {
      @include loadingTextDark;
      @media (max-width: $max-mobile) {
        margin-bottom: 7px;
        max-width: 140px;
      }
    }

    &.type {
      @include loadingTextDefault;
      @media (max-width: $max-mobile) {
        margin-bottom: 7px;
        max-width: 90px;
      }
    }

    &.total {
      @include loadingTextDark;
      @media (max-width: $max-mobile) {
        max-width: 70px;
      }
    }
  }

  &.loading &__refill {
    @media (max-width: $max-mobile) {
      display: flex;
      flex-direction: column;
    }
    max-width: 100%;
  }

}