/*
 * Expandable content
 *
 * Зависимости:
 * - ../general/css/all.css
 */

.expandable-content {
  --expandable-content-height: 240px;
  --expandable-content-duration: 400ms;
  --expandable-content-easing: ease;
  --expandable-content-button-gap: 8px;
  --expandable-content-button-offset: 16px;

  min-width: 0;
}

.expandable-content__area {
  max-height: var(--expandable-content-height);
  overflow: hidden;
}

.expandable-content__area.is-expanded {
  max-height: none;
}

.expandable-content__button {
  --btn-color: var(--accent-color);

  margin-top: var(--expandable-content-button-offset);

  line-height: 1;
}

.expandable-content__button[hidden] {
  display: none !important;
}

.expandable-content__button-content {
  --gap: var(--expandable-content-button-gap);

  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--size);
}

.expandable-content__button::after {
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform var(--transition);
}

.expandable-content__button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}