/**
 * Controls area styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

:root {
    --controls-height: 75px;
}

#controls {
    position: absolute;
    width: 100%;
    height: var(--controls-height);
    bottom: 0;
    padding: 0;
    padding-top: 12px;
    border-top: 1px solid var(--primary-border-colour);
    background-color: var(--secondary-background-colour);
}

#controls-content {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center left;
}

#auto-bake-label {
    display: inline-block;
    width: 100px;
    padding: 0;
    margin: 0;
    text-align: center;
    color: var(--primary-font-colour);
    font-size: 14px;
    cursor: pointer;
}

#auto-bake-label .check,
#auto-bake-label .check::before {
    border-color: var(--input-highlight-colour);
    color: var(--input-highlight-colour);
}

#auto-bake-label .checkbox-decorator {
    position: relative;
}

#bake {
    box-shadow: none;
}

#controls .btn {
    border-radius: 30px;
}

.output-maximised .hide-on-maximised-output {
    display: none !important;
}

.spin {
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    0%      {transform: rotate(0deg);}
    100%    {transform: rotate(360deg);}
}