@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] {
    @mixin text;

    &.overflow-hidden {
        overflow: hidden;
    }

    & 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.4s ease-in-out;
        box-sizing: border-box;
        width: 100%;


        & .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);
            }

            transition: background 0.4s ease-in-out;
        }

    }

    & [data-monster-role="detail"].active {
        height: var(--monster-height);
        transition: height 0.4s ease-in-out;
    }


}