:host(us-transaction-item) {
  .transaction-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-inline-m);
    padding: var(--space-inner-l) var(--space-inner-xl)
      calc(var(--space-inner-l) - 1px);
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-300);

    .card__info {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: var(--space-inline-xs);

      .info__badge-group {
        display: block;
      }

      .info-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--space-inline-l);

        .info__title {
          p.title-text {
            font: var(--text-p-m-light);
            color: var(--color-text-1000);
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }

      .info__subblock {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-inline-xs);

        .subblock__subtitle {
          color: var(--color-text-900);
          font: var(--text-p-s-light);
        }

        .subblock__subamount {
          color: var(--color-text-900);
          font: var(--text-p-s-light);
        }
      }
    }

    .card__amount-action {
      display: flex;
      align-items: center;
      gap: var(--space-inline-m);

      .info__badge-group {
        margin-bottom: 0;
      }

      .card__amount {
        min-width: 80px;
        font: var(--text-p-m-heavy);
        color: var(--color-text-1000);
        text-align: right;

        &.card__amount_positive {
          color: var(--color-success-1000);
        }

        &.card__amount_negative {
          color: var(--color-text-1000);
        }
      }

      .card__action {
        color: var(--color-text-700);
        font-size: 0;
        display: flex;
        align-items: center;
      }
    }

    &.transaction-item_new {
      .card__info {
        .info-block {
          .info__title {
            p.title-text {
              font: var(--text-p-m-heavy);
            }
          }
        }
      }
    }

    &.transaction-item_ignored {
      .card__info {
        .info-block {
          .info__title {
            p.title-text {
              color: var(--color-text-700);
            }
          }
        }

        .info__subblock {
          .subblock__subtitle,
          .subblock__subamount {
            color: var(--color-text-700);
          }
        }
      }

      .card__amount-action {
        .card__amount {
          color: var(--color-text-700);
        }
      }
    }
  }

  .horizontal-medium,
  .horizontal-large {
    &.transaction-item {
      .card__info {
        .info-block {
          gap: var(--space-inline-xl);

          .info__badge-group {
            margin-bottom: 0;
          }
        }
      }

      .card__amount {
        min-width: 120px;
      }
    }
  }

  .is-hovered {
    cursor: pointer;

    &:hover,
    &:active {
      background-color: var(--color-neutral-200);
    }

    &:focus {
      outline: 3px solid var(--color-primary-200);
      outline-offset: -3px;
    }
  }
}