.expandable {
  border-bottom: 1px solid $lbry-gray-1;
  margin-bottom: var(--spacing-vertical-medium);
  padding-bottom: var(--spacing-vertical-medium);

  html[data-mode='dark'] & {
    border-color: rgba($lbry-gray-5, 0.2);
  }
}

.expandable__button {
  font-size: 1.25rem;
}

.expandable--closed,
.expandable--open {
  margin-bottom: var(--spacing-vertical-small);
}

.expandable--closed {
  max-height: 10rem;
  overflow: hidden;
  position: relative;

  &::after {
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
    pointer-events: none;

    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      mix($lbry-white, $lbry-gray-1, 70%) 90%
    );
    content: '';
    position: absolute;

    html[data-mode='dark'] & {
      background-image: linear-gradient(to bottom, transparent 0%, $lbry-black 90%);
    }
  }
}

.expandable--open {
  max-height: 100%;
}