@use '../../styles/mixins.scss';

.ydb-syntax-highlighter {
    position: relative;
    z-index: 0;

    height: var(--ydb-syntax-highlighter-height, 100%);

    &__sticky-container {
        z-index: 1;
        top: 52px;
        @include mixins.sticky-top();
    }

    &__copy {
        position: absolute;
        top: 13px;
        right: 14px;

        pointer-events: all;

        opacity: 0;

        &_visible {
            opacity: 1;
        }
    }

    &__content {
        overflow: var(--ydb-syntax-highlighter-content-overflow, auto);

        height: 100%;

        background-color: var(--g-color-base-misc-light);
        scrollbar-color: var(--g-color-scroll-handle) transparent;

        pre {
            margin: 0;
            padding: var(--g-spacing-4) 0 var(--g-spacing-4) var(--g-spacing-4);

            background: transparent !important;

            @include mixins.text-code-2();
        }

        code {
            white-space: pre-wrap;
            word-break: break-word;
        }
    }

    .data-table__row:hover &__copy,
    .ydb-paginated-table__row:hover &__copy {
        opacity: 1;
    }
}