/* Entry Expander
 * (Max height for feed views)
 * -------------------------------------------------------------------------- */

.topic--snippet .entry-expander {
  --padding-bottom: 5rem;
  overflow: hidden;
  max-height: 55vh;
  position: relative;
  padding-bottom: var(--padding-bottom) !important;

  &::after {
    background: var(--color-bg--main);
    height: var(--padding-bottom);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
  }

  @media (min-width: 40em) {
    max-height: 50rem;

    [data-color-scheme="dark"] & {
      &::after {
        background: var(--color-bg--surface-glint-opaque);
      }
    }
  }
}

.entry-expander__button {
  display: none;

  .topic--snippet & {
    padding: var(--half-space);
    background: var(--color-bg--main);
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media (min-width: 40em) {
      [data-color-scheme="dark"] & { background: var(--color-bg--surface-glint-opaque); }
    }
  }

  &.btn--focusable { margin: auto 2px; }

  .entry-expander__button-label--collapse {
    display: none;
  }
}

.entry-expander.entry-expander--expanded {
  max-height: none;
  overflow: visible;

  .entry-expander__button {
    position: sticky;
    bottom: 0;
  }

  .entry-expander__button-label--expand { display: none; }
  .entry-expander__button-label--collapse { display: inherit; }
}