@import "../../style/normalize.pcss";
@import "../../style/display.pcss";
@import "../../style/mixin/button.pcss";
@import "../../style/button.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/ripple.pcss";
@import "../../style/spinner.pcss";


[data-monster-role=control] {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap; 
    width: fit-content;
    
    
    & .monster-spinner {
        width: 1.5rem !important;
        height: 1.5rem !important;
        visibility: hidden;
        color: var(--monster-color-secondary-4);
        background-color: var(--monster-bg-color-secondary-4);
    }

    & [data-monster-state-loader=show] {
        visibility: visible;
        opacity: 1;
        transition: opacity 1s ease-in-out, visibility 1.1s ease-in-out;
    }

    & [data-monster-state-loader=hide] {
        visibility: hidden;
        opacity: 0;
        transition: opacity 1s ease-in-out, visibility 1.1s ease-in-out;
    }
}


:host {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap; 
    width: fit-content;
    align-self: center;
}