@use "sass:math";

@import '~styles/config';

.transactionList {
  @include grid-col;

  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-family: $font-heading;
    font-weight: 500;
    color: $color-grey500;
  }

  &__checkbox {
    @include colorify('color');
    display: flex;
    justify-content: center;
    align-items: center;

    width: 60px;

    cursor: pointer;
  }

  &__titles {
    width: calc(100% - 60px);

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

  &__month {
    @include colorify('color');
    padding: 0 5px;

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

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

    transition: color 120ms ease-in;
    hyphens: auto;
    @media (max-width: $max-tablet) {
      display: none;
    }
  }

  &__status {
    padding: 0 5px;
    width: percentage(math.div(2, 12));

    &.SVG {
      width: percentage(math.div(1, 12));
    }

    @media (max-width: $max-tablet) {
      display: none;
    }
  }

  &__amount {
    padding: 0 5px;
    width: percentage(math.div(2, 12));

    text-align: right;

    @media (max-width: $max-tablet) {
      display: none;
    }
  }

  &__label {
    user-select: none;
    cursor: pointer;
    @media (min-width: $min-tablet) {
      display: none;
    }
  }
}