:root {
  --disclosure-duration: 260ms;
  --disclosure-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.collapsing {
  transition: height var(--disclosure-duration) var(--disclosure-ease);
}

.collapsing.collapse-horizontal {
  transition-property: width;
}

.modal.fade .modal-dialog {
  transition-duration: var(--disclosure-duration);
  transition-timing-function: var(--disclosure-ease);
}

.offcanvas {
  transition-duration: var(--disclosure-duration);
  transition-timing-function: var(--disclosure-ease);
}

.modal-backdrop.fade,
.offcanvas-backdrop.fade {
  transition: opacity 180ms var(--disclosure-ease);
}

@supports selector(details::details-content) and (interpolate-size: allow-keywords) {
  details {
    interpolate-size: allow-keywords;
  }

  details::details-content {
    display: flow-root;
    height: 0;
    min-height: 0;
    overflow: clip;
    transition: height var(--disclosure-duration) var(--disclosure-ease),
      content-visibility var(--disclosure-duration) allow-discrete;
  }

  details[open]::details-content {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collapsing,
  .modal.fade .modal-dialog,
  .offcanvas,
  .modal-backdrop.fade,
  .offcanvas-backdrop.fade,
  details::details-content {
    transition: none !important;
  }
}