.transaction-detail-item {
  color: $ui-4;
  padding: 20px 0;
  border-bottom: 1px solid $ui-3;

  &__row {
    display: flex;
    grid-gap: 5px;
  }

  &__title {
    flex-grow: 1;
    word-break: break-word;
  }

  .info-tooltip {
    display: inline-block;
    margin-inline-start: 4px;

    path {
      fill: $ui-3;
    }
  }

  &__total {
    font-weight: bold;
    color: $ui-black;
  }

  &__subtitle {
    flex-grow: 1;
  }

  &__subtext {
    text-align: end;
  }

  .currency-display-component {
    display: inline;
  }

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    margin-bottom: 20px;
  }

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}