/* Dividend schedule table, shared by the dashboard section and /dividends. */
@layer components {
  /* /dividends groups by month, each table under a sticky caption */
  .dividends-page {
    margin-inline: auto;
    max-inline-size: 50ch;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .dividends-page__total {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    margin-block-end: var(--block-space);
  }

  .dividends-page__months {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 1.5);
  }

  .dividends-table__month {
    border-block-end: var(--border);
    inset-block-start: 0;
    padding-block: var(--block-space-half);
    position: sticky;

    h3 {
      display: flex;
      font-weight: 600;
      justify-content: space-between;
    }
  }

  /* Sits above the tables in source order but renders first */
  .dividends-page__chart {
    block-size: 20vh;
    order: -1;
  }

  .dividends-table {
    inline-size: 100%;

    th, td {
      padding-block: var(--block-space-half);
      vertical-align: top;
    }

    td:last-child {
      text-align: end;
    }

    .date {
      font-variant-numeric: ordinal;
      font-weight: 400;
      inline-size: 5ch;
      text-align: start;
    }

    tr {
      color: var(--color-ink-medium);
    }

    /* Marks where today falls between two pay dates */
    tr.border-today {
      border-block-start: 1px solid var(--color-accent);

      > :first-child {
        position: relative;

        &::before {
          background-color: var(--color-accent);
          block-size: 0.5rem;
          border-radius: 50%;
          content: '';
          inline-size: 0.5rem;
          inset-block-start: -0.25rem;
          inset-inline-start: -0.5rem;
          position: absolute;
        }
      }
    }
  }
}