// ============================================================================
// :: Transactions
// ============================================================================
/**
 * Component that displays the different transactions underneath each other and
 * makes each item sortable by adding a header where each column can be sorted.
 */

// ============================================================================
// :: Root
// ============================================================================
// .o-transactions {}

// ============================================================================
// :: Elements
// ============================================================================
.o-transactions__list {
  padding-left: 0;

  list-style-type: none;
}

.o-transactions__budget {
  text-align: right;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.o-transactions--list {

  .o-transactions__item {
    padding: 1.5rem 0;

    border-bottom: $border-width-base solid $border-color-1x-light;

    @include respond-at($breakpoint-tablet-default) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .o-transactions__budget {

    @include respond-to($breakpoint-tablet-default) {
      justify-content: flex-end;
      width: 100%;
    }
  }
}