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


[data-monster-role=control] {
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap; 
    width: fit-content;


    & [data-monster-role=badge] {
        z-index: var(--monster-z-index-sticky);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-4px, -7px);
        
        &.hidden {
            display: none !important;
        }
    }
   
}

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