/**
 * TCOS Colouring Book
 * Frontend Styles
 * Sprint 5
 */

/*--------------------------------------
    Colouring Book Container
--------------------------------------*/

.tcos-colouring-book {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/*--------------------------------------
    Toolbar (Palette goes here later)
--------------------------------------*/

.tcos-colouring-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/*--------------------------------------
    Canvas
--------------------------------------*/

.tcos-colouring-canvas {
    width: 100%;
}

.tcos-colouring-canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

/*--------------------------------------
    Colourable Regions
--------------------------------------*/

.tcos-region {
    cursor: pointer;
    transition:
        fill 0.15s ease,
        stroke 0.15s ease,
        opacity 0.15s ease;
}

/* Hover */

.tcos-region:hover {
    opacity: 0.85;
}

/* Selected Region */

.tcos-region.tcos-selected {
    stroke: #0073aa;
    stroke-width: 2px;
    stroke-linejoin: round;
}

/*--------------------------------------
    Notices
--------------------------------------*/

.tcos-colouring-notice {
    padding: 16px;
    border: 1px solid #dcdcde;
    background: #fff;
    border-left: 4px solid #0073aa;
}