@import 'apps/client/src/styles/ghostfolio-style';

:host {
  display: block;

  .activities {
    overflow-x: auto;

    .mat-table {
      td {
        &.mat-footer-cell {
          border-top: 1px solid
            rgba(
              var(--palette-foreground-divider),
              var(--palette-foreground-divider-alpha)
            );
        }
      }

      th {
        ::ng-deep {
          .mat-sort-header-container {
            justify-content: inherit;
          }
        }
      }

      .mat-row {
        .type-badge {
          background-color: rgba(var(--palette-foreground-text), 0.05);
          border-radius: 1rem;
          line-height: 1em;

          ion-icon {
            font-size: 1rem;
          }

          &.buy {
            color: var(--green);
          }

          &.dividend {
            color: var(--blue);
          }

          &.item {
            color: var(--purple);
          }

          &.sell {
            color: var(--orange);
          }
        }
      }
    }
  }
}

:host-context(.is-dark-theme) {
  .mat-table {
    td {
      &.mat-footer-cell {
        border-top-color: rgba(
          var(--palette-foreground-divider-dark),
          var(--palette-foreground-divider-dark-alpha)
        );
      }
    }

    .type-badge {
      background-color: rgba(
        var(--palette-foreground-text-dark),
        0.1
      ) !important;
    }
  }
}
