@layer components {
  .my-prices-grid {
    display: grid;
    padding-block-end: var(--block-space);

    .calendar-week {
      color: var(--color-text-soft);
      font-size: small;
    }

    a {
      text-decoration: none;
    }
  }

  .my-prices-wrapper {
    display: grid;
    gap: var(--block-space-half);
  }

  .my-prices-wrapper:not(:first-of-type) {
    border-top: 1px var(--color-text-softest) solid;
    padding-block-start: var(--block-space);
  }

  .price-aggregation-table {
    min-width: 100%;
    overflow-x: scroll;
    padding-block-end: 1rem;
    margin-inline: -1rem;

    scroll-behavior: smooth;
    font-family: monospace;

    > div {
      padding-inline: 1rem;
      display: inline-flex;
      justify-content: space-between;
      gap: var(--inline-space-half);
    }

    .price-timeline-item {
      display: grid;
      row-gap: var(--block-space);
      grid-template-columns: minmax(auto, 8ch) 8ch;
      grid-template-rows: auto 1fr;
      font-size: var(--text-base);

      .month {
        color: var(--color-text-medium);
        font-size: var(--text-xs);
        text-align: center;
        white-space: nowrap;
        grid-column-start: 2;
        grid-row-start: 1;
      }

      .direction {
        display: inline-block;
        color: var(--color-text-medium);
        text-align: center;
        align-self: center;
        grid-column-start: 1;
        grid-row-start: 2;
        padding-inline: 1rem;
      }

      .value {
        display: inline-block;
        text-align: end;
        white-space: nowrap;
        grid-column-start: 2;
        grid-row-start: 2;

        padding: var(--inline-space-half);
        border: 1px solid var(--color-text-variant);
        border-radius: .25rem;
      }
    }
  }
}