@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;

    .controls {
        grid-area: controls;

        display: grid;
        grid-auto-rows: 1fr;
        grid-gap: 0.5em 0;
    }

    // fix chrome being inconsistent
    table {
        height: 100%;
    }

    div {
        text-align: right;
    }

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

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

        &:active, &:focus {
            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;
}

.abandon {
    &:hover {
        color: @red;
        border-color: @red;
    };

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