@use "govuk/base" as govuk;

// Context Aware Editor Styles
// Integrates styles for toolbar and reference highlighting

// Main wrapper for the context aware editor
.app-context-aware-editor--wrapper {
    position: relative;
    display: block;
    width: 100%;
}

// Toolbar container
.app-context-aware-editor__toolbar-container {
    // Toolbar styles adapted from markdown-editor-toolbar
    .app-context-aware-editor__toolbar {
        display: flex;
        gap: 5px;
        flex-flow: row wrap;
        padding: 10px 3px;

        &:focus-within {
            box-shadow: inset 0 0 0 2px;
            outline: 3px solid govuk.$govuk-focus-colour;
            outline-offset: 0;
        }
    }

    .app-context-aware-editor__toolbar-button-group {
        display: flex;
        gap: 0 govuk.govuk-px-to-rem(1);
    }

    .app-context-aware-editor__toolbar-button {
        width: govuk.govuk-px-to-rem(40);
        height: govuk.govuk-px-to-rem(40);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0;

        &--h2 {
            background-image: url(govuk.$govuk-images-path + "markdown-editor-h2.svg");
        }

        &--bullet-list {
            background-image: url(govuk.$govuk-images-path + "markdown-editor-bullet-list.svg");
        }

        &--numbered-list {
            background-image: url(govuk.$govuk-images-path + "markdown-editor-numbered-list.svg");
        }

        &--link {
            background-image: url(govuk.$govuk-images-path + "markdown-editor-link.svg");
        }
    }
}

// Editor container (holds textarea and highlight overlay)
.app-context-aware-editor__editor-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

// Visible textarea (transparent text on top)
.app-context-aware-editor__visible-textarea {
    position: relative;
    background-color: transparent !important;
    color: transparent;
    caret-color: black;
    z-index: 1;
}

// Highlight overlay (behind textarea, shows styled text)
.app-context-aware-editor__highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
    border: none;
    padding: 7px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent;
    color: black;
    z-index: 0;

    // Match textarea font exactly
    @include govuk.govuk-font($size: 19, $line-height: 1.25em);
}

// Style for valid references
.app-context-aware-editor--valid-reference {
    background-color: govuk.govuk-colour("yellow");
    border-radius: 2px;
}

// Improve text contrast when references are within links
.govuk-link .app-context-aware-editor--valid-reference {
    color: govuk.govuk-colour("dark-blue");
}

// Notification area for screen readers (if needed for toolbar)
.app-context-aware-editor__notification-area {
    @include govuk.govuk-visually-hidden;
}

// Error message styling
.app-context-aware-editor__error-message {
    margin: 0;
}

// Preview styles (from markdown-editor-component)
.app-context-aware-editor__preview-area {
    border: 2px solid govuk.$govuk-border-colour;
    padding: 30px;
    margin: 0 0 1em;
}

.app-context-aware-editor__preview-area :last-child {
    margin-bottom: 0;
}

.govuk-frontend-supported .app-context-aware-editor__preview-button {
    display: none;
}

.govuk-frontend-supported .app-context-aware-editor__preview-intro {
    @include govuk.govuk-media-query($from: tablet) {
        display: none;
    }
}

.govuk-frontend-supported .app-context-aware-editor__preview-area {
    @include govuk.govuk-media-query($from: tablet) {
        border: 0;
        padding: 0;
        margin-bottom: 0;
    }
}

.govuk-frontend-supported .app-context-aware-editor__edit-link {
    @include govuk.govuk-media-query($from: tablet) {
        display: none;
    }
}

// Markdown example blocks (from markdown-editor-component)
.app-context-aware-editor__markdown-example-block {
    white-space: pre-wrap;
    font-size: inherit;
    font-family: inherit;

    &-code {
        font-size: inherit;
        font-family: inherit;
    }
}

// When toolbar is disabled, ensure proper spacing
.app-context-aware-editor--wrapper:not(
    .app-context-aware-editor--with-toolbar
) {
    .app-context-aware-editor__editor-container {
        margin-top: 0;
    }
}

// When toolbar is enabled, add class for styling
.app-context-aware-editor--wrapper.app-context-aware-editor--with-toolbar {
    .app-context-aware-editor__editor-container {
        margin-top: 0; // Toolbar container handles its own spacing
    }
}

.app-context-aware--container {
    margin-bottom: govuk.govuk-spacing(0);
}

// Position "Reference data" buttons at bottom-right corner of text inputs
.app-context-aware--button {
    position: relative;
    float: right;
    width: auto;
    margin: -50px - govuk.govuk-spacing(4) 10px 10px;
    z-index: 1;

    @include govuk.govuk-media-query($from: tablet) {
        margin-top: -50px - govuk.govuk-spacing(6);
    }
}
