@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";

:host {
    --monster-control-bar-height: 2.5rem;
}

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

    & [data-monster-role=control-bar],
    & [data-monster-role=button-bar] {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        height: var(--monster-control-bar-height);
        min-height: var(--monster-control-bar-height);

        &[data-monster-layout-alignment="right"] {
            justify-content: flex-end;
        }

        & :not(slot) {
            display: flex;
        }

        & [data-monster-role=popper-nav] {
            display: flex;
            align-items: stretch;
            height: var(--monster-control-bar-height);
            min-height: var(--monster-control-bar-height);
        }

        & [data-monster-role=switch] {
            display: flex;
            height: var(--monster-control-bar-height);
            min-height: var(--monster-control-bar-height);

            &.hidden {
                display: none;
            }
        }

        & ::slotted(*) {
            display: flex;
            box-sizing: border-box;
            flex: 0 0 auto !important;
            align-self: stretch;
            height: var(--monster-control-bar-height);
            min-height: var(--monster-control-bar-height);
            min-width: 0;
        }

        & ::slotted(form),
        & ::slotted(div),
        & ::slotted(section) {
            flex-direction: row;
            align-items: stretch;
            gap: 0;
        }

        & ::slotted(input),
        & ::slotted(select),
        & ::slotted(textarea),
        & ::slotted(button) {
            appearance: none;
            box-sizing: border-box;
            border-width: var(--monster-theme-control-border-width, var(--monster-border-width));
            border-radius: var(--monster-theme-control-border-radius, var(--monster-border-radius));
            border-style: var(--monster-theme-control-border-style, var(--monster-border-style));
            border-color: var(--monster-theme-control-border-color, var(--monster-bg-color-primary-4));
            line-height: 1.5;
            height: var(--monster-control-bar-height);
            padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
            width: auto !important;
            inline-size: auto !important;
        }

        & ::slotted(monster-select) {
            --monster-select-container-align-self: stretch;
            --monster-select-container-block-size: 100%;
            --monster-select-container-overflow: hidden;
            --monster-select-selection-flex-wrap: nowrap;
            --monster-select-selection-margin: 0;
            --monster-select-control-padding: 0.4rem 0.6rem;
            width: auto !important;
            inline-size: auto !important;
            max-inline-size: 100%;
            min-inline-size: var(--monster-control-bar-select-min-inline-size, 12rem) !important;
            min-width: var(--monster-control-bar-select-min-inline-size, 12rem) !important;
        }

        & ::slotted(monster-input-group) {
            width: max-content;
        }

        & ::slotted(monster-control-bar-spacer) {
            --monster-control-bar-spacer-inline-size: 0.8rem;
            --monster-control-bar-spacer-block-size: var(--monster-control-bar-height);
            --monster-control-bar-spacer-line-inline-size: var(--monster-border-width);
            --monster-control-bar-spacer-line-block-size: 60%;
        }

    }

    & slot[name=popper] {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: stretch;
        justify-content: flex-start;
        gap: 0;

        &::slotted(*) {
            display: flex;
            box-sizing: border-box;
            width: fill-available;
            height: var(--monster-control-bar-height);
            min-height: var(--monster-control-bar-height);
        }

        &::slotted(form),
        &::slotted(div),
        &::slotted(section) {
            flex-direction: row;
            align-items: stretch;
            gap: 0;
        }

        &::slotted(input),
        &::slotted(select),
        &::slotted(textarea),
        &::slotted(button) {
            appearance: none;
            box-sizing: border-box;
            border-width: var(--monster-theme-control-border-width, var(--monster-border-width));
            border-radius: var(--monster-theme-control-border-radius, var(--monster-border-radius));
            border-style: var(--monster-theme-control-border-style, var(--monster-border-style));
            border-color: var(--monster-theme-control-border-color, var(--monster-bg-color-primary-4));
            line-height: 1.5;
            height: var(--monster-control-bar-height);
            padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
        }

        &::slotted(monster-select) {
            --monster-select-container-align-self: stretch;
            --monster-select-container-block-size: 100%;
            --monster-select-container-overflow: hidden;
            --monster-select-selection-flex-wrap: nowrap;
            --monster-select-selection-margin: 0;
            --monster-select-control-padding: 0.4rem 0.6rem;
        }

        &::slotted(monster-input-group) {
            width: max-content;
        }

        &::slotted(monster-control-bar-spacer) {
            --monster-control-bar-spacer-inline-size: 100%;
            --monster-control-bar-spacer-block-size: 0.8rem;
            --monster-control-bar-spacer-line-inline-size: calc(100% - 1rem);
            --monster-control-bar-spacer-line-block-size: var(--monster-border-width);
        }

    }
}