details {
    background: var(--details_bg);
    border: 1px solid var(--details_border);
    border-radius: 10px;
    margin-bottom: 5px;
    font-family: 'open-sans', 'arial';
    overflow: hidden;

    &:hover {
        background: var(--details_bg_hover);
    }

    &[open] {
        background: var(--details_bg_open);
    }

    &[open] summary {
        background: var(--summary_bg_open);
        border-bottom: 1px solid var(--details_border);
        border-radius: 10px 10px 0px 0px;
    }

    &[open] summary:hover {
        background: var(--summary_bg_open_hover);
        border-bottom: 1px solid var(--details_border);
    }

    /* fix remove details arrow on safari */
    summary::-webkit-details-marker {
        display: none;
    }

    &[open] summary ~ p {
        animation: sweep .5s ease-out;
    }

    p {
        padding: 5px;
        padding-top: 0px;
        font-size: 15px;
        margin: 25px 10px 20px 10px;
    }

    > summary {
        list-style: none;
    }

    > summary::marker {
        display: none;
    }
}

summary {
    font-size: 16px;
    padding: 15px;
    cursor: pointer;
    user-select: none;
}

@keyframes sweep {
    0% { opacity: 0; margin-left: -10px; }
    100% { opacity: 1; margin-left: 10px; }
}