html {
    --transition-duration: 300ms;
    --transition-timing-function: cubic-bezier( 0.68, -0.55, 0.27, 1.55 );

    transition-behavior: allow-discrete;
	interpolate-size: allow-keywords;
}

/* Submenu animations */
.sub-menu[open] {
    opacity: 1;
    block-size: auto;
    transform: scale(1);
}
.sub-menu {
    opacity: 0;
    block-size: 0;
    transform: scale(0.9);

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--transition-timing-function);
}
@starting-style {
    .sub-menu[open] {
        opacity: 0;
        block-size: 0;
        transform: scale(0.9);
    }
}

/* Popover animations */
[popover]:popover-open {
    opacity: 1;
    transform: scale(1);
}
[popover] {
    opacity: 0;
    transform: scale(0.9);

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--transition-timing-function);
}
@starting-style {
    [popover]:popover-open {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Dialog animations */
dialog[open] {
    opacity: 1;
    transform: scale(1);
}
dialog {
    opacity: 0;
    transform: scale(0.9);

    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--transition-timing-function);
}
@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Details */
details::details-content {
	block-size: 0;
	opacity: 0;
	overflow: hidden;

	transition-property: block-size, opacity;
	transition-duration: var(--transition-duration);
	transition-timing-function: ease-in-out;
}
details[open]::details-content {
	block-size: auto;
	opacity: 1;
}
@starting-style {
	details[open]::details-content {
		block-size: 0;
		opacity: 0;
	}
}