/* Rust Playground Interactive Examples */

/* Container */
.rust-example-container {
    position: relative;
    margin: 1em 0;
}

/* Badges row */
.rust-example-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.rust-example-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-family: monospace;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 3px;
    text-transform: lowercase;
}

.rust-example-badge-ignore {
    background-color: #6c757d;
    color: white;
}
.rust-example-badge-ignore::before { content: "⏭ "; }

.rust-example-badge-compile-fail {
    background-color: #dc3545;
    color: white;
}
.rust-example-badge-compile-fail::before { content: "✗ "; }

.rust-example-badge-should-panic {
    background-color: #fd7e14;
    color: white;
}
.rust-example-badge-should-panic::before { content: "💥 "; }

.rust-example-badge-no-run {
    background-color: #17a2b8;
    color: white;
}
.rust-example-badge-no-run::before { content: "⚙ "; }

.rust-example-badge-nightly {
    background-color: #6f42c1;
    color: white;
}
.rust-example-badge-nightly::before { content: "🌙 "; }

.rust-example-badge-version {
    background-color: #ffc107;
    color: #212529;
    cursor: help;
}

/* Miri badges */
.rust-example-badge-miri {
    background-color: #6f42c1;
    color: white;
}
.rust-example-badge-miri::before { content: "🔬 "; }

.rust-example-badge-miri-expect-ub {
    background-color: #b02a37;
    color: white;
}
.rust-example-badge-miri-expect-ub::before { content: "☣️ "; }

/* Button toolbar - injected by JavaScript */
.rust-example-buttons {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    gap: 0.3em;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.rust-example-container:hover .rust-example-buttons {
    opacity: 1;
}

/* Adjust button position when badges are present */
.rust-example-container:has(.rust-example-badges) .rust-example-buttons {
    top: calc(0.5em + 1.8em + 0.5em);
}

/* Individual buttons */
.rust-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s;
}

.rust-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.rust-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rust-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.rust-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Copy button tooltip */
.rust-btn-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3em 0.6em;
    margin-bottom: 0.3em;
    font-size: 0.75em;
    white-space: nowrap;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.rust-btn-tooltip.show {
    opacity: 1;
}

/* Running state */
.rust-btn-run.running {
    opacity: 0.6;
    cursor: wait;
}

/* Hidden lines toggle active state */
.rust-btn-toggle-hidden.active {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Hidden lines styling when revealed */
.rust-hidden-line {
    opacity: 0.5;
    background-color: rgba(128, 128, 128, 0.15);
}

/* Output area - injected by JavaScript */
.rust-example-output {
    margin-top: 0.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #1e1e1e;
    overflow: hidden;
}

.rust-example-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    background-color: #2d2d2d;
    border-bottom: 1px solid #444;
}

.rust-example-output-status {
    font-size: 0.85em;
    font-weight: bold;
}

.rust-example-output-status.success { color: #4caf50; }
.rust-example-output-status.success::before { content: "✓ "; }

.rust-example-output-status.error { color: #f44336; }
.rust-example-output-status.error::before { content: "✗ "; }

.rust-example-output-status.expected { color: #ff9800; }
.rust-example-output-status.expected::before { content: "✓ "; }

.rust-example-output-status.warning { color: #ffc107; }
.rust-example-output-status.warning::before { content: "⚠ "; }

.rust-example-output-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 0.3em;
}

.rust-example-output-close:hover {
    color: #fff;
}

.rust-example-output-content {
    margin: 0;
    padding: 1em;
    max-height: 300px;
    overflow: auto;
    font-family: monospace;
    font-size: 0.85em;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Hide the JSON data script */
.rust-example-data {
    display: none !important;
}

/* Error notification */
.rust-example-error {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0.5em 1em;
    margin-top: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.9em;
}

.rust-example-error-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.rust-example-error-message {
    flex: 1;
    color: #856404;
}

.rust-example-error-retry {
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 0.25em 0.75em;
    cursor: pointer;
    font-size: 0.85em;
}

.rust-example-error-retry:hover {
    background-color: #0b5ed7;
}

.rust-example-error-dismiss {
    background: transparent;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #856404;
    padding: 0 0.25em;
}

.rust-example-error-dismiss:hover {
    color: #533f03;
}

/* Miri button styling */
.rust-btn-miri:hover {
    background-color: #6f42c1;
}

/* Miri-specific output status */
.rust-example-output-status.miri-success { color: #4caf50; }
.rust-example-output-status.miri-success::before { content: "🔬 "; }

.rust-example-output-status.miri-ub { color: #b02a37; }
.rust-example-output-status.miri-ub::before { content: "☣️ "; }