@import 'colours.less';

aside {
    grid-area: ctrl;
    display: grid;

    grid-template-areas:
        "timer controls"
        "timer controls"
        "timer controls";

    grid-template-columns: min-content 1fr;
    grid-template-rows: 1fr;

    padding-left: 1em;

    .instance-ctrl {
       grid-template-rows: 2fr 2fr 1fr;
    }

    .controls {
        grid-area: controls;

        display: grid;

        grid-template-areas:
            "top"
            "p0"
            "p1"
            "bottom";

        grid-template-rows: min-content 3fr 3fr 1fr;
        grid-gap: 0.5em 0;
    }

    &.play-ctrl {
        .controls {
            grid-template-rows: 4fr 4fr 1fr;
        }
    }

    text-align: center;

    button {
        width: 100%;
        font-size: 150%;
        margin-bottom: 0.5em;
    }

    button.ready:enabled {
        &:hover {
            color: forestgreen;
            border-color: forestgreen;
        }

        &:active, &:focus, &.enabled {
            background: forestgreen;
            color: black;
            border-color: forestgreen;
        }
    }

    .timer-container {
        grid-area: timer;

        display: flex;
        flex: 1 1 100%;

        height: 100%;
        min-height: 100%;

        width: 0.25em;
        max-width: 0.25em;

        margin: 0 1em 0 0;
        border: none;
    }

    .timer {
        background: whitesmoke;
        transition-property: all;
        transition-duration: 0.25s;
        transition-delay: 0;
        transition-timing-function: ease;
    }
}

.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
    color: forestgreen;
}

.ready {
    color: forestgreen;
    transition-property: color, background;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.team-page-ctrl {
    display: flex;
    height: 3em;
    align-items: center;
}

.team-page-ctrl h2 {
    padding: 0 0.75em 0 0.75em;
}

.instance-ctrl-btns {
    font-size: 50%;

    display: flex;
    flex-flow: column;

    button {
        flex: 0;
    }

    .ready {
        flex: 1;
        font-size: 200%;
    }
}

.abandon:not([disabled]) {
    &:hover {
        color: @red;
        border-color: @red;
        border: 2px solid @red;
    };

    &:active, &.confirming {
        background: @red;
        color: black;
        border: 2px solid black;
    }
}