@layer components {
    .dropdown {
        position: relative; /* So that we can positions the drawer relative to toggle */
        display: inline-block; /* Only take up the space of the toggle */
    }

    .dropdown__drawer {
        position: absolute;
        z-index: var(--z-index-dropdown);
        background-color: var(--color-background-app);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--pad-sm);

        /* Initially Hidden */
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .dropdown__drawer.is-open {
        display: block; /* Stimulus controller handles the visibility */
        opacity: 1;
    }
}