.workspace {
    cursor: none;

    &.working {
        cursor: crosshair;
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
    }

    .dragon {
        pointer-events: auto !important;
    }

    .audio-wrap {
        display: inline-block;
        background-color: #000;

        .title {
            font-size: 2em;
            padding: 1em;
            color: #fff;
        }
    }
}

.hover-menu {
    border: 1px dashed #ccc;
    position: absolute;

    .icons {
        background-color: rgba(#fff, 0.5);
    }

    .icon {
        display: inline-block;
        padding: 0.25em 0.5em;
        cursor: pointer;
        margin: 1px;
    }

    .active {
        background-color: rgba(#fff, 0.75);
        border: 1px solid #ccc;
        margin: 0;
    }

    .controls {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        background-color: rgba(#000, 0.5);
        font-size: 1.5em;
        align-items: center;
        box-sizing: border-box;
        padding: 0.2em;

        .play, .pause {
            color: #aaa;
            margin: 0 0.4em;
        }

        progress {
            position: relative;
            flex: auto;
            width: 1em;
            height: 1.5em;
        }
    }
}