/* ============================================================
   Code card
   ============================================================ */

.sas-code-card {
    width: 100%;
    overflow: hidden;
    background: #111820;
    border: 1px solid rgba(36, 152, 210, .28);
    border-radius: var(--sas-radius-md);
    box-shadow: var(--sas-shadow-xs);
}

.sas-code-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    background: #17212d;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sas-code-card-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

    .sas-code-card-dot:nth-child(1) {
        background: #f87171;
    }

    .sas-code-card-dot:nth-child(2) {
        background: #fbbf24;
    }

    .sas-code-card-dot:nth-child(3) {
        background: #22c55e;
    }

.sas-code-card-title {
    margin-left: 5px;
    color: #aeb9c7;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .035em;
}

.sas-code-card pre,
.sas-code-card pre[class*="language-"] {
    width: 100%;
    margin: 0 !important;
    padding: 18px 20px !important;
    overflow-x: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.sas-code-card code,
.sas-code-card code[class*="language-"] {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.6;
    white-space: pre;
}

.sas-code-card .token.comment,
.sas-code-card .token.prolog,
.sas-code-card .token.doctype,
.sas-code-card .token.cdata {
    color: #6a9955;
}

.sas-code-card .token.punctuation {
    color: #d4d4d4;
}

.sas-code-card .token.namespace {
    opacity: .8;
}

.sas-code-card .token.property,
.sas-code-card .token.tag,
.sas-code-card .token.boolean,
.sas-code-card .token.number,
.sas-code-card .token.constant,
.sas-code-card .token.symbol {
    color: #b5cea8;
}

.sas-code-card .token.selector,
.sas-code-card .token.attr-name,
.sas-code-card .token.string,
.sas-code-card .token.char,
.sas-code-card .token.builtin {
    color: #ce9178;
}

.sas-code-card .token.operator,
.sas-code-card .token.entity,
.sas-code-card .token.url {
    color: #d4d4d4;
}

.sas-code-card .token.atrule,
.sas-code-card .token.attr-value,
.sas-code-card .token.keyword {
    color: #569cd6;
}

.sas-code-card .token.function {
    color: #dcdcaa;
}

.sas-code-card .token.class-name {
    color: #4ec9b0;
}

.sas-code-card .token.regex,
.sas-code-card .token.important,
.sas-code-card .token.variable {
    color: #d16969;
}

@media (max-width: 639.98px) {
    .sas-code-card pre,
    .sas-code-card pre[class*="language-"] {
        padding: 14px 16px !important;
    }

    .sas-code-card code,
    .sas-code-card code[class*="language-"] {
        font-size: .75rem;
        line-height: 1.55;
    }
}