@use './code-block-theme' as theme;

.kbq-code-block {
    display: flex;
    flex-direction: column;
    position: relative;

    border-width: var(--kbq-code-block-size-container-border-width);
    border-style: solid;
    border-radius: var(--kbq-code-block-size-container-border-radius);

    box-sizing: border-box;

    hyphens: none;
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;

    .kbq-code-block__header {
        display: flex;
        align-items: center;
        padding: var(--kbq-size-s) var(--kbq-size-m);

        .kbq-code-block__header-tabs {
            overflow: hidden;
            flex-grow: 1;
        }
    }

    .kbq-code-block__actionbar {
        display: flex;
        justify-content: right;
        align-items: center;

        z-index: 1;

        .kbq-code-block__actionbar__button-stack {
            display: flex;
            gap: var(--kbq-code-block-size-actionbar-content-gap-horizontal);
        }
    }

    &:has(.kbq-code-block__view-all) {
        .kbq-code-block__main {
            .kbq-code-block__code {
                padding-bottom: var(--kbq-size-3xl) !important;
            }
        }
    }

    .kbq-code-block__main {
        flex-grow: 1;
        flex-direction: column;

        border-radius: var(--kbq-code-block-size-container-border-radius);

        &.cdk-keyboard-focused {
            outline-style: solid;
            outline-width: var(--kbq-code-block-size-container-border-width-focused);
            outline-offset: -1px;
        }

        .kbq-code-block__pre {
            margin: 0;
            flex-grow: 1;
        }

        .kbq-code-block__code {
            tab-size: var(--kbq-code-block-tab-size);
            padding: var(--kbq-code-block-size-with-header-content-padding-top)
                var(--kbq-code-block-size-with-header-content-padding-horizontal)
                var(--kbq-code-block-size-with-header-content-padding-bottom)
                var(--kbq-code-block-size-with-header-content-padding-horizontal);

            &:focus-visible {
                outline: none;
            }
        }

        /* stylelint-disable-next-line selector-class-pattern */
        .hljs {
            display: block;
        }

        .hljs-ln-numbers {
            padding-right: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);
            vertical-align: baseline;
            text-align: right;
        }

        .hljs-ln {
            border-collapse: unset;

            /* stylelint-disable-next-line selector-class-pattern */
            .hljs {
                padding: 0;
            }
        }

        .hljs-ln-n:before {
            white-space: nowrap;
        }
    }

    &.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
        display: none;
    }

    &.kbq-code-block_soft-wrap {
        .kbq-code-block__code {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }
    }

    &.kbq-code-block_view-all {
        .kbq-code-block__main {
            max-height: unset;
            overflow: auto;
        }
    }

    &:not(.kbq-code-block_view-all) {
        .kbq-code-block__main {
            overflow: hidden;
        }
    }

    &.kbq-code-block_hide-tabs {
        .kbq-code-block__header {
            padding: 0;
        }

        .kbq-code-block__actionbar {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-s) 0;

            .kbq-code-block__actionbar__button-stack {
                border-width: 1px;
                border-style: solid;
                border-radius: calc(var(--kbq-size-border-radius) + 1px);
            }
        }

        .kbq-code-block__main {
            position: relative;

            .kbq-code-block__code {
                padding: var(--kbq-code-block-size-no-header-content-padding-vertical)
                    var(--kbq-code-block-size-no-header-content-padding-horizontal);
            }

            .hljs-ln-numbers {
                padding-right: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);
            }
        }
    }

    &:not(.kbq-code-block_hide-tabs) {
        .kbq-code-block__header {
            border-radius: var(--kbq-code-block-size-container-border-radius)
                var(--kbq-code-block-size-container-border-radius) 0 0;
        }

        .kbq-code-block__main {
            border-radius: 0 0 var(--kbq-code-block-size-container-border-radius)
                var(--kbq-code-block-size-container-border-radius);
        }
    }

    &.kbq-code-block_show-actionbar .kbq-code-block__actionbar {
        display: flex;
    }

    &:not(:has(.kbq-code-block__view-all)) {
        .kbq-code-block__main {
            overflow: auto;
        }
    }

    .kbq-code-block__view-all {
        display: flex;
        justify-content: center;
        width: 100%;

        position: absolute;
        bottom: calc(var(--kbq-code-block-size-container-border-width) * -1);

        border-radius: var(--kbq-code-block-size-container-border-radius);

        .kbq-code-block__view-all__wrapper {
            border-radius: var(--kbq-size-border-radius);
        }

        &.kbq-code-block__view-all_collapsed {
            padding-top: var(--kbq-code-block-size-collapse-collapsed-padding-top);
            padding-bottom: var(--kbq-code-block-size-collapse-collapsed-padding-bottom);
        }

        &.kbq-code-block__view-all_expanded {
            padding-top: var(--kbq-code-block-size-collapse-expanded-padding-top);
            margin-bottom: var(--kbq-code-block-size-collapse-expanded-padding-bottom);
        }
    }
}

@include theme.kbq-code-block-theme();
@include theme.kbq-code-block-typography();