:host(us-detailed-card) {
  width: 100%;
  display: block;
  padding: var(--space-inner-xl);

  .detailed-card {
    display: flex;
    flex-direction: column;
    width: 100%;

    &__wrapper {
      display: flex;
      flex-direction: column;
      padding: var(--space-inner-l) var(--space-inner-xl);
      gap: var(--space-inline-s);
      text-align: center;
      background-color: var(--color-neutral-200);
      border-radius: var(--border-radius-m);
    }

    &__amount {
      color: var(--color-text-1000);
      font: var(--text-headline-h3);

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

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

    &__title {
      color: var(--color-text-900);
      font: var(--text-label-m);
    }

    &__subtitle {
      color: var(--color-text-900);
      font: var(--text-p-xs-light);
    }

    &_ignored {
      .detailed-card__amount,
      .detailed-card__title,
      .detailed-card__subtitle {
        color: var(--color-text-700);
      }

      .detailed-card__amount {
        &.amount_positive,
        &.amount_negative {
          color: var(--color-text-700);
        }
      }
    }
  }
}