/**
 * Color variants
 */

.collapsible {
    &.-light {
        --collapsible--background: var(--collapsible--light--background, var(--color-light));
        --collapsible--border-top-color: var(
            --collapsible--light--border-top-color,
            var(--color-light-shade-50)
        );
        --collapsible--border-right-color: var(
            --collapsible--light--border-right-color,
            var(--color-light-shade-50)
        );
        --collapsible--border-bottom-color: var(
            --collapsible--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --collapsible--border-left-color: var(
            --collapsible--light--border-left-color,
            var(--color-light-shade-50)
        );
        --collapsible--color: var(--collapsible--light--color, var(--contrast-text-color-light));
        --collapsible--body--background: var(
            --collapsible--light--body--background,
            var(--color-white)
        );
    }

    &.-dark {
        --collapsible--background: var(--collapsible--dark--background, var(--color-dark));
        --collapsible--border-top-color: var(
            --collapsible--dark--border-top-color,
            var(--color-dark-tint-50)
        );
        --collapsible--border-right-color: var(
            --collapsible--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --collapsible--border-bottom-color: var(
            --collapsible--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --collapsible--border-left-color: var(
            --collapsible--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --collapsible--color: var(--collapsible--dark--color, var(--contrast-text-color-dark));
        --collapsible--body--background: var(
            --collapsible--dark--body--background,
            var(--color-dark-tint-50)
        );
    }

    &.-transparent {
        --collapsible--background: var(--collapsible--transparent--background, transparent);
        --collapsible--border-top-color: var(
            --collapsible--transparent--border-top-color,
            transparent
        );
        --collapsible--border-right-color: var(
            --collapsible--transparent--border-right-color,
            transparent
        );
        --collapsible--border-bottom-color: var(
            --collapsible--transparent--border-bottom-color,
            transparent
        );
        --collapsible--border-left-color: var(
            --collapsible--transparent--border-left-color,
            transparent
        );
        --collapsible--color: var(--collapsible--transparent--color, inherit);
        --collapsible--body--background: var(
            --collapsible--transparent--body--background,
            transparent
        );
        --collapsible--box-shadow-color: transparent;

        .light-theme &,
        .-light & {
            --collapsible--icon--color: var(
                --collapsible--transparent--icon--light--color,
                var(--color-dark)
            );
        }

        .dark-theme &,
        .-dark & {
            --collapsible--icon--color: var(
                --collapsible--transparent--icon--dark--color,
                var(--color-light)
            );
        }
    }
}