.view {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: var(--mud-elevation-10);
}

    .view .toolbar {
        width: 100%;
        height: 3rem;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-bottom: 1px solid var(--mud-palette-divider);
        background-color: var(--mud-palette-background);
    }

        .view .toolbar .action-button {
            padding: 0rem 0.4rem;
            margin-right: 0.5rem;
            border-radius: var(--mud-default-borderradius);
            transition: all 0.3s ease;
            background-color: var(--bs-gray-200);
        }

            .view .toolbar .action-button:hover {
                background-color: var(--mud-palette-action-hover);
                transform: translateY(-1px);
            }

            .view .toolbar .action-button:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

                .view .toolbar .action-button:disabled:hover {
                    transform: none;
                    background-color: transparent;
                }

        .view .toolbar .icon-button {
            font-size: 1.2rem;
            color: var(--mud-palette-primary);
        }


    .view > div {
        display: flex;
        position: relative;
        width: 100%;
        flex-grow: 1;
        overflow: hidden;
    }

        .view > div > canvas {
            transition: cursor 0.2s ease;
            display: block;
            transform: scale(1, -1);
        }

            .view > div > canvas:hover {
                cursor: crosshair;
            }