@import "../../../ui/imports/mixins/border-radius";
@import "../../../ui/imports/mixins/break-word";
@import "../../../ui/imports/mixins/clearfix";
@import "../../../ui/imports/aui-colours";

@code-rainbow-gradient: linear-gradient(90deg, var(--ds-background-accent-red-bolder, rgba(255, 0, 0, 1)), var(--ds-background-accent-yellow-subtle, rgba(255, 255, 0, 1)) 15%, var(--ds-background-accent-green-bolder, rgba(0, 255, 0, 1)) 30%, var(--ds-background-accent-teal-subtle, rgba(0, 255, 255, 1)) 50%, var(--ds-background-accent-blue-bolder, rgba(0, 0, 255, 1)) 65%, var(--ds-background-accent-magenta-subtle, rgba(255, 0, 255, 1)) 80%, var(--ds-background-accent-red-bolder, rgba(255, 0, 0, 1)));
@code-quote-color-green: #009100;
@code-quote-color-red: #910000;
@code-keyword-color: #910091;
@code-comment-color: #808080;
@code-object-color: #000091;
@code-macro-color: #78492a;
@code-tag-color: #000091;

// this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
table.confluenceTable {
    border-collapse: collapse;
    margin: 5px 0 5px 2px;
    width: auto;
}

// this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
td.confluenceTd {
    border: 1px solid var(--ds-border, @aui-border-color);
    padding: 3px 4px;
}

// this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
th.confluenceTh {
    border: 1px solid var(--ds-border, @aui-border-color);
    background: var(--ds-surface, @aui-color-faint);
    padding: 3px 4px;
    text-align: center;
}

/* override for aui form styles (stalker comment) */
div.wiki-edit {
    margin-bottom: 0;
    padding-bottom: 0;

    .wiki-edit-content {
        position: relative;

        p {
            padding: 0;
        }

        h1 {
            font-size: 2.4em;
        }

        h2 {
            font-size: 1.8em;
            border: none;
        }

        h3 {
            font-size: 1.3em;
        }

        h4 {
            font-size: 1.2em;
        }

        h5 {
            font-size: 1em;
        }

        h6 {
            font-size: 0.9em;
        }

        img,
        a img,
        fieldset {
            border: 0;
        }

        ul {
            margin: 0 0 1em 2em;
        }

        ol {
            list-style-type: decimal;
            list-style-position: outside;
            padding-left: 2.5em;
        }

        blockquote {
            border-left: 2px solid var(--ds-border, #3c78b5);
            font-size: 1em;
            font-family: inherit;
            margin-left: 0;
            padding-left: 1em;
        }

        small,
        .small {
            font-size: 0.9em;
        }

        strong,
        b,
        .bolded {
            font-weight: bold;
        }
    }
}
.wiki-styles() {
    // this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
    .preformatted,
    .code {
        border: 1px solid var(--ds-border, @aui-border-color);
        background: var(--ds-surface, @aui-color-faint);
        font-size: 12px;
        line-height: 1.33333333333333;
        font-family: monospace;
    }

    .code-keyword {
        color: var(--ds-text-accent-magenta, @code-keyword-color);
    }

    .code-object {
        color: var(--ds-text-accent-blue-bolder, @code-object-color);
    }

    .code-macro {
        color: var(--ds-text-accent-orange-bolder, @code-macro-color);
    }

    .code-quote {
        &,
        .code-keyword,
        .code-object {
            color: var(--ds-text-accent-green, @code-quote-color-green);
        }
    }

    /* An alternative string highlight colour */
    .code-quote-red {
        &,
        .code-keyword,
        .code-object {
            color: var(--ds-text-accent-red, @code-quote-color-red);
        }
    }

    .code-comment {
        &,
        .code-keyword,
        .code-object,
        .code-quote,
        .code-quote-red {
            color: var(--ds-text-subtlest, @code-comment-color);
        }
    }

    .code-xml .code-keyword {
        font-weight: bold;
    }

    .code-tag {
        color: var(--ds-text-warning-inverse, @code-tag-color);
    }

    .code-rainbow {
        background: @code-rainbow-gradient;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .bidi-unicode {
        unicode-bidi: isolate;
        &::before {
            padding: 0 4px;
            background-color: var(--ds-background-accent-yellow-subtler, @aui-color-Y75);
            color: var(--ds-text, #7f5f01);
            font-style: normal;
        }
        &[data-bidi-character-code]::before {
            content: "<U+" attr(data-bidi-character-code) ">";
        }
        &:not([data-bidi-character-code])::before {
            content: "\FFFD";
        }
    }

    // this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
    .panel {
        border: 1px solid var(--ds-border, @aui-border-color);
        .border-radius(3px);
        margin: 9px 0;
    }

    // this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
    .panelHeader {
        border-bottom: 1px solid var(--ds-border, @aui-border-color);
        padding: 9px 12px;
    }

    // this selector is used in LESS :extend in JEP, if you change it, make sure it'll match
    .panelContent {
        padding: 9px 12px;
    }
    .panelContent.preformattedContent {
        padding: 0;
    }
}

/* All wiki formatted content needs a specific selector prefixed with .wiki-edit also so that it overrides aui form styles */
.wiki-styles();

div.wiki-edit {
    .wiki-styles();
}

div.wiki-edit pre {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
}

div.preformattedContent pre,
div.codeContent pre {
    max-height: 30em;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: normal;
}

div.preformattedContent pre { // JRADEV-20300
    /* We value the user's formatting in {noformat} blocks. We should never introduce our own newlines in to unformatted blocks of text. */
    white-space: pre;
    word-break: normal;
    padding: 9px 12px;

    table & { // JRADEV-18069
        /* ...unless they're in a table, in which case we'd prefer the content wrap than the user having to scroll to the bottom of the table to scroll it. */
        .break-word();
        white-space: pre-wrap;
        // We need to pull in Confluence's floating-scrollbar stuff to remedy this.
    }
}

/* miscellaneous styles */
.linkerror {
    background-color: var(--ds-surface, #fcc);
}

.editPageInsertLinks,
.editPageInsertLinks a {
    font-weight: normal;
    font-size: 9px;
}

.helpheading {
    border-bottom: 1px solid;
    font-weight: bold;
    background-color: var(--ds-surface, #ddd);
    padding: 4px 4px 2px;
    margin: 0;
}

.helpheading,
.menuheading {
    border-bottom-color: var(--jira-color-menuBackgroundColour);
}

.helpcontent {
    padding: 4px 4px 20px;
    background-color: var(--ds-surface, #fff);
}

.gridHover {
    background-color: var(--ds-surface-hovered, #f9f9f9);
}

.navmenu {
    border: 1px solid var(--ds-border, @aui-border-color);
}

/* side menu highlighting (e.g. space content screen) */
.optionPadded {
    padding: 2px;
}

.optionSelected {
    border: 1px solid var(--ds-border, #ddd);
    background-color: var(--ds-background-selected, #ffffcc);
    padding: 2px;
    margin: -1px;
}

.optionSelected a {
    font-weight: bold;
    text-decoration: none;
    color: var(--ds-text-selected, black);
}

.menuheading {
    border-bottom: 1px solid;
    font-weight: bold;
    background-color: var(--ds-surface, #ddd);
    padding: 4px 4px 2px;
}

.menuitems {
    padding: 4px 4px 20px;
    background-color: var(--ds-surface, @aui-color-faint);
}

.pagetitle {
    font-size: 22px;
    font-weight: bold;
    font-family: inherit;
    color: var(--ds-text, #003366);
}

.wiki-edit-content.previewClass {
    background-color: var(--ds-surface, #e8f1ff);
    padding: 0.3em 0.7em;
}

.fullscreen > .aui-icon.wiki-renderer-icon {
    background-image: url("../../../images/icons/ico_preview.png");
}

.selected > .aui-icon.wiki-renderer-icon {
    background-image: url("../../../images/icons/ico_preview_selected.png");
}

.loading > .aui-icon.wiki-renderer-icon {
    background-image: url("../../../images/icons/wait.gif");
}

/* security dropdown */
form.aui {
    .field-tools,
    .security-level,
    .security-level .select-menu,
    .security-level .current-level,
    .security-level .default-comment-level {
        display: inline-block;
    }

    .current-level {
        padding-left: 10px;
        padding-right: 10px;
    }

    .default-comment-level {
        padding-left: 12px;
        padding-right: 12px;

        &-status {
            opacity: 1;
            transition: 0.5s opacity linear;
            &.fade-out {
                opacity: 0;
            }
        }
        &-status-text {
            padding-left: 5px;
        }
        &-status-text.default-saved-message {
            color: var(--ds-text-subtlest, @aui-color-mid);
        }
        &-status-icon.aui-iconfont-approve {
            color: var(--ds-icon-success, @aui-color-status-success-background);
        }
        &-status-icon.aui-iconfont-error {
            color: var(--ds-icon-danger, @aui-color-status-error-background);
        }
        &-switch {
            padding: 0 10px 0 5px;
            border: 0;
            height: 16px;
            &.disabled-link {
                color: var(--ds-text-disabled, @aui-color-mid);
                pointer-events: none;
                cursor: default;
                text-decoration: none;
            }
        }
        &-load-text {
            padding-left: 5px;
        }
    }

    .security-level-inline-error {
        display: inline-block;
        width: 100%;
        padding: 4px;
        &:empty {
            display: none;
        }
    }

    .security-level-unavailble {
        color: var(--ds-text-danger, @aui-color-status-error-background);
        &-text {
            padding-left: 5px;
        }
    }

    .security-level .drop {
        &:hover {
            text-decoration: none;
        }

        .drop-menu {
            margin-left: 0;

            &::after {
                margin-top: 0;
            }
        }
    }

    .security-level-drop-icon {
        color: var(--ds-icon-subtle, @aui-color-mid);
    }
    // to better align it with the permissions lock icon
    .security-level .drop:hover .drop-menu::after {
        border-top-color: var(--ds-text, @aui-color-text);
    }

    .aui-field-wikiedit {
        .clearfix();

        .field-tools,
        .security-level {
            border-left: 1px solid var(--ds-border, #eee);
            float: left;
            margin-left: 5px;
            margin-top: 5px;
            padding-left: 5px;
        }

        .wiki-edit + .field-tools,
        textarea + .field-tools {
            margin-left: 0;
            padding-left: 0;
            border-left: 0;
        }
    }
}