@import "/UI/Theme.scss";

EffectsProperties
{
    flex-direction: column;
    overflow: hidden;

    .header
    {
        padding: 10px 14px;
        flex-shrink: 0;

        h2
        {
            gap: 0.5rem;
            align-items: center;
            font-size: 14px;
            font-weight: 650;
            font-family: $subtitle-font;
            color: $menu-color;
        }
    }

    .empty-state
    {
        font-family: $subtitle-font;
        padding: 16px 12px;
        text-align: center;
        color: $menu-text;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
    }

    ControlSheet
    {
        flex-grow: 1;
        overflow-y: scroll;
        padding: 8px;

        .body
        {
            padding: 0;
            margin: 0;
        }

        .controlgroup
        {
            padding: 0;

            > .body
            {
                padding: 0;
            }
        }
    }

    ControlSheetGroup
    {
        > .body
        {
            padding: 0;
            margin: 0;
            gap: 2px;
        }
    }

    .page
    {
        gap: 2px;
    }

    controlsheetrow, .control-row
    {
        width: 100%;
        background-color: #53698111;
        border: 1px solid transparent;
        padding: 8px;
        border-radius: 4px;
        max-height: auto;
        gap: 4px;
        transition: background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;

        &:hover
        {
            background-color: #53698122;

            > .left
            {
                color: #fff;
            }
        }

        &.action
        {
            cursor: pointer;

            &:hover
            {
                background-color: $menu-accent-soft;
                border-color: rgba( $color-accent, 0.4 );
                box-shadow: 0 0 10px rgba( $menu-accent, 0.12 );
                transform: translateY( -1px );
            }

            &:active
            {
                background-color: $menu-accent;
                box-shadow: 0 0 6px rgba( $menu-accent, 0.1 );
                transform: translateY( 0 );
            }
        }

        > .left
        {
            width: 150px;
            overflow: hidden;
            flex-shrink: 0;
            gap: 4px;
        }

        > .right, > .left
        {
            flex-shrink: 0;
        }
    }
}