@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/mixin/hover.pcss';

@import "../../style/control.pcss";
@import "../../style/floating-ui.pcss";

[data-monster-role="container"] {
    container-type: inline-size;
    container-name: field-set;
    margin-bottom: 1rem;
    @mixin text;
}

.collapse-alignment {
    padding: 0 1rem;
}

[data-monster-role=header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-color-seashell-3);
    margin-bottom: 1rem;
    padding-bottom: 0.2rem;

    @media (prefers-color-scheme: dark) {
        border-color: var(--monster-color-secondary-1);
    }

    & label {
        padding-right: 0.3rem;
        @mixin text;
    }

    & [data-monster-role=extended-switch] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 1rem;
    }

    & [data-monster-role=title] {
        font-weight: bold;
        padding-left: 1rem;
    }
}

.hidden {
    display: none !important;
}

slot {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.8rem;
    accent-color: var(--monster-color-secondary-2);
}

.multiple-columns slot {
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
}

::slotted(label),
::slotted(.label) {
    color: var(--monster-color-primary-1);
    border-bottom: thin dotted var(--monster-color-primary-1);
}

::slotted(hr),
::slotted(h1),
::slotted(h2),
::slotted(h3),
::slotted(h4),
::slotted(h5),
::slotted(h6) {
    grid-column: 1 / -1;
}

::slotted(hr) {
    border: none;
    border-top: thin dotted var(--monster-color-gray-3);
    margin: 1rem 0;
    padding: 0;
}

::slotted(select) {

}

::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
}

::slotted(input),
::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {

}

::slotted(input:not([type="checkbox"]):not([type="radio"])) {
    width: 100%;
    border-radius: var(--monster-theme-control-border-radius);
    border-width: var(--monster-theme-control-border-width);
    border-color: var(--monster-theme-control-border-color);
    border-style: var(--monster-theme-control-border-style);

    &[readonly] {
        background-color: var(--monster-bg-color-primary-3);
        color: var(--monster-color-primary-3);
    }

}

::slotted(input[readonly]:not([type="checkbox"]):not([type="radio"])) {
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
    cursor: default;
}


::slotted(input),
::slotted(monster-toggle-switch),
::slotted(select) {
    min-height: 1.8rem;
    padding: 0.5rem;
    box-sizing: border-box;
}

::slotted(monster-password) {
    min-height: 1.8rem;
}

::slotted(input[type="color"]) {
    padding: 0 0.2rem;
    min-height: calc(1.8rem + 0.4rem);
    width: 100%;
}

::slotted(input[type="time"]),
::slotted(input[type="date"]) {
    padding: 0 0.2rem;
    min-height: calc(1.8rem + 0.4rem);
}

::slotted(input[type="checkbox"]),
::slotted(input[type="radio"]) {
    width: 1.8rem;
    min-height: calc(1.8rem + 0.4rem);
    padding: 0 0.2rem;
}

::slotted(input[type="file"]) {
    padding: 0.4rem;
    min-height: calc(1.2rem );
}

::slotted(input),
::slotted(monster-toggle-switch),
::slotted(monster-password),
::slotted(select) {
    align-self: end;
}

::slotted(monster-toggle-switch) {
    width: 3rem;
    padding: 0;
}

@container field-set (max-width: 1200px) {

    .multiple-columns {

        & slot {
            grid-template-columns: auto 1fr auto 1fr;
        }
    }

}

@container field-set (max-width: 900px) {

    .multiple-columns {

        & slot {
            grid-template-columns: auto 1fr;
        }
    }

}

@container field-set (max-width: 500px) {
    slot {
        grid-template-columns: 1fr;
        gap: 0;
    }

    ::slotted(h1),
    ::slotted(h2),
    ::slotted(h3),
    ::slotted(h4),
    ::slotted(h5),
    ::slotted(h6) {
        grid-column: 1;
    }

    ::slotted(select) {
        grid-column: 1;
    }

    ::slotted(div.wrapper),
    ::slotted(input),
    ::slotted(monster-toggle-switch),
    ::slotted(monster-password),
    ::slotted(textarea),
    ::slotted(select) {
        grid-column: 1;
    }

    ::slotted(monster-button),
    ::slotted(monster-action-button),
    ::slotted(monster-state-button),
    ::slotted(monster-api-button),
    ::slotted(monster-state-button),
    ::slotted(monster-datasource-save-button) {
        grid-column: 1;
    }

    ::slotted(h1),
    ::slotted(h2),
    ::slotted(h3),
    ::slotted(h4),
    ::slotted(h5),
    ::slotted(h6) {
        grid-column: 1
    }

    ::slotted(label),
    ::slotted(.label) {
        padding-top: 1rem;
        border-bottom: none;
    }

    .multiple-columns {
        & slot {
            grid-template-columns: 1fr;
        }

    }


}