/** Kotlin Playground
 * Interactive Kotlin code execution widget
 */
.markdown-section .kotlin-run {
    margin-block: var(--margin-block);

    .code-area {
        order: 1;
    }

    .fold-button {
        opacity: 0.1;
    }

    .output-wrapper {
        background-color: var(--md-code-bg-color) !important;
        font-size: unset !important;
        border-bottom: none !important;
    }

    .js-code-output-executor {
        order: 3;
        border-top: none !important;
    }

    .js-code-output-executor:has(.output-wrapper) {
        border-top: 1px solid var(--code-border-color) !important;
    }

    .executable-fragment-wrapper {
        margin-bottom: 0 !important;

        .executable-fragment {
            border: none !important;
            background-color: transparent !important;
            display: flex;
            flex-direction: column;

            .code-area {
                padding: 0.5rem 0.3rem;
                border-radius: var(--border-radius) var(--border-radius) 0 0;
            }

            .code-output {
                padding: 1em 1.5em !important;
                line-height: var(--code-output-line-height);
            }

            .standard-output {
                color: var(--md-code-fg-color) !important;
            }

            .run-button {
                order: 2;
                position: static !important;
                width: 100% !important;
                height: auto !important;
                padding: 0.3em 0.75em 0.2em;
                border-top: 1px solid var(--code-border-color);
                background-color: var(--code-control-back-color) !important;
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><polygon fill='transparent' stroke='%23777' stroke-width='2' stroke-linejoin='round' points='15,10 1,19 1,1'/></svg>") !important;
                background-size: 16px 20px !important;
                background-position: 0.75em 0.35em !important;
                color: var(--code-control-color);

                &::after {
                    padding-left: 24px;
                    vertical-align: top;
                    content: "Run";
                    font-size: 0.9em;
                    color: var(--code-control-color);
                }

                &:hover {
                    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><polygon stroke='%2324a7ff' fill='%2324a7ff' stroke-width='2' stroke-linejoin='round' points='15,10 1,19 1,1'/></svg>") !important;

                    &::after {
                        color: var(--code-control-color--high);
                    }
                }
            }

            .console-close {
                background-color: transparent !important;
                right: 0.3em !important;
                top: 0.3em;
                cursor: pointer;
                opacity: 0.7;

                &:hover {
                    opacity: 1;
                }
            }
        }

        .compiler-info,
        .compiler-info__open-editor {
            display: none !important;
        }
    }
}