/* The scrolling holdings list shell, shared by /tickers and /portfolio/:asset_class */
@layer components {
  /* list#toggleNumbers flips this on every .js-toggle-numbers element at once,
     so the eye icon and the figures it hides swap together */
  .hidden-numbers {
    display: none;
  }

  /* The list reads as a phone-width column even on a desktop */
  .holdings-list__viewport {
    align-items: center;
    display: flex;
    margin-inline: auto;
    max-inline-size: 30em;
    min-block-size: 100dvh;

    @media (min-width: 768px) {
      padding: var(--block-space-half) var(--inline-space);
    }
  }

  .holdings-list__panel {
    flex-grow: 1;
    overflow-y: scroll;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }

    /* Phones get the full viewport; wider screens get a floating card */
    @media (min-width: 640px) {
      border: var(--border);
      border-radius: 0.5em;
      box-shadow: var(--shadow);
    }
  }

  .holdings-list__frame {
    block-size: 100dvh;
    display: flex;
    flex-direction: column;

    @media (min-width: 640px) {
      block-size: 95dvh;
    }
  }

  /* Header — scrolls away on the way down, returns on the way up (see _list.html.erb) */
  .holdings-list__header {
    position: sticky;
    inset-block-start: 0;
    transition: top 300ms ease-in-out;
    z-index: var(--z-events-day-header);
  }

  .holdings-list__header-inner {
    background-color: var(--color-canvas);
    border-block-end: var(--border);
    block-size: 7.5em;
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    opacity: 0.95;
    padding-block-end: var(--block-space);
  }

  .holdings-list__summary {
    align-items: center;
    block-size: 5rem;
    display: flex;
    padding-inline: var(--inline-space-double);
  }

  .holdings-list__delta,
  .holdings-list__totals {
    flex-grow: 1;
    text-align: end;
  }

  .holdings-list__delta {
    font-size: var(--text-small);
  }

  .holdings-list__slides {
    font-size: var(--text-x-small);
  }

  .holdings-list__body {
    flex-grow: 1;
  }

  /* Footer sits above the header so the filter drawer opens over the rows */
  .holdings-list__footer {
    background-color: var(--color-canvas);
    inset-block-end: 0;
    padding-block-end: calc(var(--custom-safe-inset-bottom) + var(--block-space));
    position: sticky;
    transition: bottom 300ms ease-in-out;
    z-index: var(--z-nav);
  }

  /* Holding row
  /* ------------------------------------------------------------------------ */

  .holding {
    border-block-end: var(--border);
    color: inherit;
    display: block;

    &:last-of-type {
      border-block-end: 0;
    }
  }

  .holding__row {
    align-items: center;
    block-size: 4rem;
    box-sizing: border-box;
    display: flex;
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space-double);
  }

  .holding__main {
    flex-grow: 1;
    inline-size: 80%;
    min-inline-size: 0;
  }

  .holding__heading {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
    overflow-x: scroll;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  .holding__name {
    font-weight: 700;
    margin-inline-end: var(--inline-space);
  }

  .holding__tags {
    display: flex;
    gap: var(--inline-space-half);
  }

  .holding__tag {
    border: var(--border);
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    padding-inline: var(--inline-space-half);
  }

  .holding__meta {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    inline-size: 11rem;
    overflow: hidden;
    padding-block: 0.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .holding__delta {
    font-size: var(--text-small);
  }

  .holding__values {
    text-align: end;
  }

  .holding__changes {
    font-size: var(--text-x-small);
    text-align: end;
  }
}