/**
This is used to inform the user that certain actions may not be available. Ie starting the VM when it's already started.
 */
a.k_disabled {
    cursor: not-allowed;
}

/**
VM Console inline frame
 */
/*
The Katapult console has a fixed minimum width (~1200px) and is served cross-origin, so we
can't restyle it. We give our frame a tall, usable height and let it fill the (wide) product
page column. If the column is ever narrower than the console's 1200px minimum, the frame
scrolls horizontally (starting at the left edge) rather than clipping the content.
*/
#kvm-console {
    width: 100%;
    height: 80vh;
    min-height: 520px;
    position: relative;
    overflow: auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}

#kvm-console iframe {
    display: block;
    width: 100%;
    min-width: 1200px; /* never let our frame shrink below the console's own minimum */
    height: 100%;
    border: none;
}

/**
This is a badge displaying the VM's state, ie 'started', 'stopped', 'unknown'
 */
.kvm-state {
    padding: 0.5rem 0.8rem 0.5rem 2.2rem;
    border-radius: 4px;
    background-color: #1f003f;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

/**
This is a dot next to the text in the badge, intended to look like an indicating LED, some states below may pulse with an animation
 */
.kvm-state::before {
    content: ' ';
    position: absolute;
    top: calc(50% - 5px);
    left: 1rem;
    height: 10px;
    width: 10px;
    background-color: #cecece;
    display: block;
    border-radius: 10px;
}

/**
Some templates may need special adjustments for the dot
 */
.kvm-state.for-template--six {
    padding-left: 2.7rem;
}

/**
Specific VM state badges for the VMs
 */

/**
Started
 */
.kvm-state.state--started {
    background-color: #112b00;
}

.kvm-state.state--started::before {
    background-color: #2a7500;
    animation: kvmBlinkStateStarted 2s infinite;
}

@keyframes kvmBlinkStateStarted {
    from { background-color: #2a7500; }
    50% { background-color: #39ab00; }
    to { background-color: #2a7500; }
}

/**
Stopped
 */
.kvm-state.state--stopped {
    background-color: #7d0000;
}

.kvm-state.state--stopped::before {
    background-color: #d10000;
}

/**
Building
 */
.kvm-state.state--building {
    background-color: #001741;
}

.kvm-state.state--building::before {
    background-color: #0043b3;
    animation: kvmBlinkStateBuilding 2s infinite ease-in-out;
}

@keyframes kvmBlinkStateBuilding {
    from { background-color: #0043b3; }
    50% { background-color: #ffffff; }
    to { background-color: #0043b3; }
}