.details{appearance:none;border-top:1px solid #e7ecf3;.details__summary{--chevron-width:15px;--chevron-height:7px;--chevron-line-length:10px;border-left:3px solid transparent;cursor:pointer;font-size:16px;font-weight:500;line-height:1.5em;list-style:none;padding:20px 0;padding-left:16px;padding-right:calc(var(--chevron-width) + 16px);position:relative;transition:border-color .2s linear;@media not all and (pointer:coarse){&:hover{background-color:#f2f5f9;border-left-color:var(--orange)}}&::-webkit-details-marker,&::marker{display:none}&:after,&:before{background-color:currentColor;content:"";height:var(--chevron-line-length);pointer-events:none;position:absolute;right:calc(var(--chevron-width)/2 + 8px);top:50%;transform-origin:bottom;width:1px}&:before{transform:translateY(-50%) rotate(45deg)}&:after{transform:translateY(-50%) rotate(-45deg)}.details:open &{border-left-color:var(--orange);&:after,&:before{transform-origin:top}}}.details__main{padding:8px}}