@import (reference) '../styles/custom.less';
@import (reference) '../styles/modules/variables.less';

.UserWalletTransactions {
  background-color: @white;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  margin: 20px 0;

  &:empty {
    display: none;
  }

  &__loader {
    border-bottom: @base-border;
    padding: 20px;

    &:nth-of-type(2) {
      border-top: @base-border;
    }

    @media @small {
      border-right: @base-border;
      border-left: @base-border;
      border-bottom-left-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;

      &:nth-of-type(2) {
        border-top-left-radius: @border-radius-base;
        border-top-right-radius: @border-radius-base;
      }
    }
  }

  &__transaction {
    color: @grey-nightRider;
    display: flex;
    padding: 10px 15px;
    border-bottom: @base-border;

    &:nth-of-type(2) {
      border-top: @base-border;
    }

    @media @small {
      border-right: @base-border;
      border-left: @base-border;

      &:nth-of-type(2),
      &:last-of-type {
        border-top-left-radius: @border-radius-base;
        border-top-right-radius: @border-radius-base;
      }
    }
  }

  &__memo {
    word-wrap: break-word;
  }

  &__avatar {
    margin-top: 5px;
  }

  &__icon-container {
    align-items: center;
    color: @blue-heather;
    background-color: @blue-solitude;
    border-radius: 4px;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-top: 4px;
    width: 44px;
  }

  &__icon {
    font-size: 22px !important;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    width: 100%;
    overflow: hidden;
  }

  &__content-recipient {
    display: block;
    white-space: nowrap;
    color: @grey-mortar;

    @media @xsmall {
      display: flex;
      flex-direction: row;
    }
  }

  &__timestamp {
    color: @blue-botticelli;
    font-size: 14px;
  }

  &__transfer {
    color: @red;
    margin-left: auto;
  }

  &__received {
    color: @green;
    margin-left: auto;
  }

  &__payout {
    margin-left: auto;
  }

  &__payout-rewards {
    &:after {
      content: ' - ';
      color: @blue-botticelli;
    }

    &:last-of-type {
      &:after {
        content: '';
      }
    }
  }

  @media @small {
    border-radius: @border-radius-base;
  }
}

div[data-dir='rtl'] .UserWalletTransactions {
  &__content {
    padding-left: 0;
    padding-right: 10px;
  }

  &__payout {
    direction: ltr;
    margin-right: auto;
    margin-left: 0;
  }

  &__transfer {
    direction: ltr;
    margin-right: auto;
    margin-left: 0;
  }

  &__received {
    direction: ltr;
    margin-right: auto;
    margin-left: 0;
  }
}

@import 'UserWalletTransactions-nightmode';
