@import '@sourcegraph/codeintellify/lib/HoverOverlay.scss';
@import './blame/BlameLine';
@import './LineDecorationAttachment';
@import './discussions/DiscussionsGutterOverlay.scss';

.blob {
    position: relative;
    overflow: auto;
    padding-top: 0.5rem;
    tab-size: 4;
    display: flex;

    &__code {
        flex: 1;

        table {
            border-collapse: collapse;
        }

        td.line {
            &::before {
                // draw line number with css so it cannot be copied to clipboard
                content: attr(data-line);
            }

            text-align: right;
            padding-left: 0.5rem;
            min-width: 2rem;
            user-select: none;
            vertical-align: top;

            .theme-dark & {
                color: $gray-18;
            }
            .theme-light & {
                color: $gray-05;
            }
        }

        tr {
            transition: background 200ms ease-out;
            &.selected {
                .theme-light & {
                    background: $gray-02;
                }
                .theme-dark & {
                    background: $gray-21;
                }
            }
        }

        td.line,
        td.code {
            padding: 0;
        }

        td.code {
            width: 100%;
            padding-left: 1rem;
            white-space: pre;

            // Possibly not needed but without this, empty lines with blame-portals wrap incorrectly
            span {
                display: inline-block;
            }

            .blame-portal {
                display: inline-block;

                span::before {
                    content: attr(data-contents);
                }

                .blame {
                    padding-left: 1rem;
                    display: inline-block;
                    width: 0;
                    outline: none;

                    .theme-dark & {
                        color: $gray-16;
                    }
                    .theme-light & {
                        color: $gray-07;
                    }
                }
            }
        }

        &--wrapped {
            td.code {
                white-space: pre-wrap;
            }
        }
    }
}