/*=============================================================================
  File:         readwritetools.com/css/details.css
  Language:     CSS
  Copyright:    Read Write Tools © 2023
  License:      CC-BY-NC-ND 4.0
  Initial date: Jan 13, 2023
  Contents:     Expandable/collapsable details/summary
=============================================================================*/

details {
	margin-bottom: 2rem;	
}
details summary {
	font-family: var(--sans-serif-font);
	color: var(--white);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    margin-bottom: 1rem;
}
details[open] {
	font-family: var(--serif-font);
    color: var(--color);
    background-color: var(--medium-black);
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray);
    box-shadow: -2px -2px 2px var(--pure-black), 5px 5px 8px var(--pure-black);
    padding: 1rem;
}
details.shadow summary {
	color: var(--yellow);
	cursor: pointer;
}
details[open].shadow {
    background-color: var(--medium-black);
    border-top: 1px solid var(--pure-black);
    border-bottom: 1px solid var(--pure-black);
    padding: 1rem;
    box-shadow: 5px 5px 8px var(--pure-black);
}

details[open] summary ~ * {
  animation: sweep 0.5s ease-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-top: -1em; }
  100%  {opacity: 1; margin-top: 0;  }
}