.area-definition-container {
    width: clamp(300px, 900px, 70vw) !important;
}

.area-definition {
    border-radius: 1rem;
    border: solid 1px var(--mud-palette-medium-gray-10O);
    position: relative;
    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: 0rem 0rem 0rem var(--mud-palette-medium-gray-20O);
    flex: 1;
    aspect-ratio: 2;
}

    .area-definition:hover {
        box-shadow: .2rem .2rem .5rem var(--mud-palette-medium-gray-20O);
    }

    .area-definition.area-definition-active {
        background-color: var(--mud-palette-secondary-blue-10O);
        box-shadow: 0rem 0rem 0rem var(--mud-palette-medium-gray-20O) !important;
        cursor: default !important;
    }


    .area-definition .area-definition-title {
        position: absolute;
        z-index: 1;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }


.gd-area-overlay, .gd-card-element-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.gd-card-element-overlay {
    width: 100vw !important;
    height: 100vh !important;
    top: calc(-1 * var(--parent-top));
    left: calc(-1 * var(--parent-left));
}

    .gd-area, .gd-area-placeholder {
        position: absolute;
        background-color: var(--mud-palette-secondary-blue-10O);
    }

.gd-area {
    cursor: grab;
    border: 1px solid var(--mud-palette-medium-gray-50O);
}

    .gd-area:active {
        cursor: grabbing;
        border: 3px solid var(--mud-palette-secondary-blue-40O);
    }

    .gd-area.dragging ~ .gd-area-overlay {
        cursor: grabbing;
    }

    .gd-area.resizing-tl ~ .gd-area-overlay {
        cursor: nw-resize;
    }

    .gd-area.resizing-tr ~ .gd-area-overlay {
        cursor: ne-resize;
    }

    .gd-area.resizing-bl ~ .gd-area-overlay {
        cursor: sw-resize;
    }

    .gd-area.resizing-br ~ .gd-area-overlay {
        cursor: se-resize;
    }

    .gd-area .gd-area-inner {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

        .gd-area .gd-area-inner .delete-container {
            position: absolute;
            right: 0;
            top: 0rem;
            border-top-right-radius: .5rem;
            border-top-left-radius: .5rem;
            z-index: 2;
            opacity: 0;
            pointer-events: none;
            transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        }

        .gd-area .gd-area-inner:hover .delete-container, .gd-area:active .gd-area-inner .delete-container {
            transform: translateY(-2.3rem);
            padding: .5rem;
            opacity: 1;
            pointer-events: all;
        }

        .gd-area .gd-area-inner .delete-container .mud-button-root {
            box-shadow: none !important;
            background-color: transparent !important;
            border-radius: 5rem !important;
        }

            .gd-area .gd-area-inner .delete-container .mud-button-root:hover {
                background-color: var(--mud-palette-medium-gray-10O) !important;
            }

        .gd-area .gd-area-inner .delete-container .mud-icon-root {
            font-size: 1rem !important;
            color: var(--mud-palette-medium-gray) !important;
        }

.gd-area-corner {
    --cornerSize: .6rem;
    --position: calc(-1 * var(--cornerSize)/2);
    position: absolute;
    width: var(--cornerSize);
    height: var(--cornerSize);
    background-color: var(--mud-palette-primary-surface-light);
    border-radius: .1rem;
    border: 1px solid var(--mud-palette-medium-gray-50O);
}

    .gd-area-corner.corner-top-left {
        top: var(--position);
        left: var(--position);
        cursor: nw-resize;
    }

    .gd-area-corner.corner-top-right {
        top: var(--position);
        right: var(--position);
        cursor: ne-resize;
    }

    .gd-area-corner.corner-bottom-left {
        bottom: var(--position);
        left: var(--position);
        cursor: sw-resize;
    }

    .gd-area-corner.corner-bottom-right {
        bottom: var(--position);
        right: var(--position);
        cursor: se-resize;
    }

.area-definition:not(.area-definition-active) .gd-area, .area-definition:not(.area-definition-active) .gd-area * {
    pointer-events: none;
}

.area-definition.area-definition-active .gd-area {
    background-color: rgb(from var(--mud-palette-primary-surface-light) r g b / 0.5);
}

.gd-area-placeholder {
    --simulatedPadding: .3rem;
    --defaultBorder: color-mix(in srgb, var(--mud-palette-secondary-blue) 30%, white 70%);
    --ddActiveBorder: color-mix(in srgb, var(--mud-palette-secondary-blue) 60%, white 40%);
    --mouseOverBorder: color-mix(in srgb, var(--mud-palette-secondary-blue) 90%, white 10%);
    opacity: 0;
    border: 3px dotted;
    border-color: var(--defaultBorder) !important;
    background-color: color-mix(in srgb, var(--mud-palette-secondary-blue) 5%, white 95%) !important;
    transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    border-radius: .4rem;
}

    .gd-area-placeholder.gd-area-placeholder-visible {
        opacity: 1;
    }