// Copyright (c) 2020-2021 Drew Lemmy
// This file is part of KristWeb 2 under GPL-3.0.
// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
@import (reference) "../../App.less";

.transaction-summary-item {
  flex-flow: nowrap;

  .transaction-left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .transaction-type {
      a {
        font-weight: bold;
        color: @text-color-secondary;
      }

      &-transferred a, &-name_transferred a { color: @kw-primary; }
      &-sent a, &-name_sent a, &-name_purchased a { color: @kw-orange; }
      &-received a, &-mined a, &-name_received a { color: @kw-green; }
      &-name_a_record a { color: @kw-purple; }

      @media (max-width: @screen-xl) {
        font-size: 90%;
      }
    }

    .transaction-time {
      color: @text-color-secondary;
      font-size: 90%;

      @media (max-width: @screen-xl) {
        font-size: 85%;
      }
    }
  }

  .transaction-middle {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    .transaction-field {
      font-weight: bold;
      white-space: nowrap;
      color: @text-color-secondary;
    }

    .transaction-a-record-value {
      font-family: monospace;
      font-size: 90%;
      color: @text-color-secondary;
    }

    .transaction-a-record-removed {
      font-style: italic;
      font-size: 90%;
      color: @text-color-secondary;

      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .transaction-right {
    flex: 0;
    font-size: @font-size-lg;

    display: flex;
    justify-content: center;
    align-items: center;

    .transaction-name {
      font-weight: bold;
    }
  }
}