@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] {

    flex-direction: column;

    /*
    @mixin text;


    & button {
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

    & .button:hover {
        @mixin box-hover;
    }

    & [data-monster-role="detail"] {
        @mixin text;
        height: 0;
        transition: height 0.5s ease-in-out;
        box-sizing: border-box;

        background-color: var(--monster-bg-color-primary-2);
        color: var(--monster-color-primary-2);

        & .padding {
            padding: 1rem;
        }

        & .deco-line {
            margin: 0;
            border: 0;
            padding: 0;
            height: 2px;

            background: linear-gradient(to right, var(--monster-color-gradient-1) 0, var(--monster-color-gradient-2) 50%, var(--monster-color-gradient-3) 100%);
            @media (prefers-color-scheme: dark) {
                background: var(--monster-color-primary-1);
            }


        }


    }

    & [data-monster-role="detail"].active {
        height: var(--monster-height);
    }
    */


}