@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-template-areas:
            "top"
            "p0"
            "p1"
            "bottom";

        .flex {
            display: flex;
            flex-flow: column;;
        }

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

        &:last-child {
            margin-bottom: 0;
        }
    }

    .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;
    // animation: ready 2s linear 0s infinite alternate;
    transition-property: color, background;
    transition-duration: 0.25s;
    transition-timing-function: ease;

    &:enabled {
        color: forestgreen;
        border-color: forestgreen;

        &:hover {
            background: forestgreen;
            color: black;
            border-color: forestgreen;
        }
    }

    // all green
    // &:enabled {
    //     background: forestgreen;
    //     color: black;
    //     border-color: forestgreen;

    //     &:hover {
    //         color: forestgreen;
    //         border-color: forestgreen;
    //         background: 0;
    //     }
    // }

}

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

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

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

    display: flex;
    flex-flow: column;

    button {
        flex: 0;
    }

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

    .quit {
        flex: 1;
        font-size: 200%;
        animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
    }

    .flex {
        flex: 1;
    }
}

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

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

.draw:not([disabled]) {
    &:active, &.confirming {
        background: @gray-hover;
        color: black;
        border: 2px solid @gray-hover;
    }
}

@keyframes ready {
    from {
        border-color: @gray-exists;
    }

    to {
        border-color: forestgreen;
    }
}