// ============================================================================
// :: Transaction
// ============================================================================
/**
 * Display a transaction between two accounts. The account name and other
 * information is displayed, but the amount is eiter added or removed and styled
 * accordingly.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-transaction {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

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

// ============================================================================
// :: Elements
// ============================================================================
.m-transaction__link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-floor;

  width: 100%;
  height: 100%;

  cursor: pointer;
}

.m-transaction__content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  @include respond-at($breakpoint-tablet-default) {
    align-items: center;
  }
}

.m-transaction__bank {
  min-width: 1.8rem;
  width: 1.8rem;
  margin-right: 1.2rem;

  @include respond-at($breakpoint-mobile-default) {
    min-width: 2.4rem;
    width: 2.4rem;
  }

  @include respond-at($breakpoint-tablet-default) {
    min-width: 3rem;
    width: 3rem;
  }
}

.m-transaction__bank-visual {
  max-width: 100%;
}

.m-transaction__info {
  padding-left: 0;

  list-style-type: none;
}

.m-transaction__info-name,
.m-transaction__info-type,
.m-transaction__info-account,
.m-transaction__info-date {
  margin-bottom: 0.2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.m-transaction__info-name,
.m-transaction__info-type {
  hyphens: auto;
}

.m-transaction__info-account,
.m-transaction__info-date {
  hyphens: none;
}

.m-transaction__info-type,
.m-transaction__info-account,
.m-transaction__info-date {
  text-transform: uppercase;

  color: $text-color-medium;
}

.m-transaction__budget {
  justify-content: flex-end;

  @include respond-to($breakpoint-mobile-default) {
    align-self: flex-end;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-transaction--small {

  .m-transaction__date,
  .m-transaction__budget,
  .m-transaction__info-name,
  .m-transaction__info-type,
  .m-transaction__info-account,
  .m-transaction__info-date {
    font-size: $font-size-1x-small;
    line-height: $line-height-1x-small;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-transaction {

  &.is-positive {

    .m-transaction__budget {
      color: $primary-color-base;
    }
  }

  &.is-negative {

    .m-transaction__budget {
      color: $text-color-base;
    }
  }
}