@use "sass:math";

@import '~styles/config';

.invoiceListItem {
  display: flex;
  padding: $gutter*0.5 0;

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

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

  &__invoice {
    display: flex;

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

  &__title {
    @include colorify('color');
    @include responsive-font(15, 17);

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

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

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

  &__status {
    @include responsive-font(14, 15);
    width: percentage(math.div(3, 12));
    font-weight: 500;
  }

  &__amount {
    @include responsive-font(15, 17);

    width: percentage(math.div(3, 12));
    font-weight: 700;
    text-align: right;
  }

  &__edit {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    cursor: pointer;
  }
}