/*
 * Override styles for the core/details block
 *
 * This block is used in the ClassVR v3 theme to create an accordion
 * with a custom icon. The styles below are used to override the default
 * styles in WordPress.
 */

.wp-block-details {
    border-bottom: 1px solid var(--wp--preset--color--primary-orange-900);
    font-family: var(--wp--preset--font-family--cabin);
    padding: 16px;

    > summary {
        /*
         * Style the summary element to have a larger font size and
         * bold font weight. This is the header of the accordion.
         */
        font-size: var(--wp--preset--font-size--heading-three);
        align-items: center; /* Vertically center the content */
        font-weight: 700;
        list-style: none; /* Remove default bullets */
        display: flex; /* Use flexbox for alignment */
        gap: 16px; /* Add some space between the number and the content */

        &::-webkit-details-marker {
            display: none;
        }

        &::before {
            /*
             * Use the ClassVR v3 icon font for the accordion icon.
             * This is a custom font that is included in the theme.
             */
            font-family: "classvr_v3_icons";
            justify-content: center;
            align-items: center;
            content: "\E004";
            font-weight: 400;
            font-size: 48px;
            display: flex; /* Center the icon */
            flex-shrink: 0;
        }
    }

    > *:not(:first-child) {
        /*
         * Add some margin to the left of all elements inside the
         * details block except for the first one (the summary).
         */
        margin-inline-start: 64px;
        font-size: 14px;
    }

    /* This is the open state of the summary */
    &[open] {
        > summary::before {
            /*
             * Use a different icon for the open state of the accordion.
             * This is a custom icon from the ClassVR v3 icon font.
             */
            content: "\E003";
        }
    }
}