@import 'variables';

:host {
    position: relative;
}

.wrapper {
    height: 100%;
}

button.extension-point-info-trigger {
    position: absolute;
    background-color: var(--color-accent-500);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    border: 0;
    margin: 0;
    padding: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;

    &:hover {
        opacity: 1;
    }

    clr-icon {
        color: white;
    }
}

.extension-info {
    padding: 12px;
}

pre {
    padding: 6px;
    font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
    background-color: var(--color-grey-200);
}

::ng-deep .highlighted {
    margin: calc(var(--space-unit) * 2);
    padding: calc(var(--space-unit) * 2);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--border-radius);
    background-color: var(--color-component-bg-200);
    font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
    color: var(--color-json-editor-text);
    .ts-string {
        color: var(--color-accent-600);
    }
    .ts-comment {
        color: var(--color-grey-500);
    }
    .ts-keyword {
        color: var(--color-json-editor-key);
    }
    .ts-default {
        color: var(--color-json-editor-text);
    }
}
