.code-box {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
    border: 1px solid rgba(212, 212, 212, 0.76);
    border-radius: 5px;
    transition: all 0.2s;
    background: #fff;

    &:hover {
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
    }

    &:target {
        border: 1px solid #1890ff;
    }

    .xy-divider.xy-divider-with-text {
        margin-bottom: 0;
    }
}

.xy-messagebox {
    .code-box {
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
        border: none;
        margin-bottom: 0;
    }
    .code-box-code-wrapper {
        display: block;
    }
    .code-box-actions {
        display: none;
    }
}

.xy-messagebox-state-exited {
    .code-box-code-wrapper {
        display: none;
    }
}

.code-box-demo {
    padding: 32px 24px 10px;
    color: rgba(0, 0, 0, 0.65);
}
.code-box-description {
    color: rgb(49, 70, 89);
    padding: 12px 24px 12px;
}
.code-box-left {
}
.code-box-code-wrapper {
    display: none;

    pre[class*="language-"] {
        margin-bottom: 0;
        border-radius: 0 0 3px 3px;
        margin-top: 0;
    }
}
.code-box-actions {
    border-radius: 0 0 3px 3px;
    padding: 2px 5px;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #b2b2b2;
    cursor: pointer;
    transition: cubic-bezier(0.19, 1, 0.22, 1);
}

.code-box-actions__icon:hover {
    color: #333;
}