@import "../../style/display.pcss";
@import "../../style/control.pcss";
@import "../../style/border.pcss";
@import "../../style/button.pcss";
@import "../../style/typography.pcss";
@import "../../style/floating-ui.pcss";

div[data-monster-role="control"] {
    position: relative;
    height: 100%;

    & [data-monster-role=button-bar] {
        display: flex;
        flex-direction: row;
        
        & :not(slot[name=button]) {
            display: flex;
        }


        & [data-monster-role=popper-nav] {
            display: flex;
            align-items: stretch;
        }

        & [data-monster-role=switch] {
            display: flex;

            &.hidden {
                display: none;
            }
        }

        & ::slotted(*:not(:last-child)) {
            margin-right: calc(-1 * var(--monster-border-width));
        }

    }

    & slot[name=popper] {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        gap: 0.4rem;

        &::slotted(*) {
            width: fill-available;
        }

    }


}