/* This style is used to give a field the same styling as inline-editable field
By keeping the same styling, it avoids the jumping behaviour when applying actual inline edit styling */
.view-issue-field {
    display: inline-block;
    padding-right: 30px;
}

.editable-field {
    box-sizing: border-box;
    -webkit-transition: box-shadow 150ms ease-in 0ms;
    transition: box-shadow 150ms ease-in 0ms;
    border-radius: 2.01px;
    cursor: text;
    display: inline-block;
    max-width: 100%;
    box-shadow: 0 0 0 0 transparent;
    padding: 2px 30px 2px 5px; /* needs to match the indent of an AUI form field */
    position: relative;
    vertical-align: top;
    word-break: break-word;

    &:hover,
    &:focus-within,
    &.saving {
        box-shadow: 0 0 0 1px var(--ds-border, #ebecf0); /* jira previous fallback value: @aui-color-N30 */

        .overlay-icon {
            opacity: 1;
            z-index: auto;
        }
    }

    &:hover,
    &:focus-within {
        background-color: var(--ds-surface-hovered, #fff);

        .overlay-icon {
            -webkit-transition: opacity 150ms ease-in 0ms;
            transition: opacity 150ms ease-in 0ms;
        }
    }

    &.saving {
        .save-options,
        .field-tools {
            display: none;
        }

        form.aui .field-group .aui-ss-icon.drop-menu,
        form.aui .field-group .aui-ss-field {
            border-bottom-right-radius: 3.01px;
        }
    }

    &.active {
        background-color: var(--ds-surface, #fff);
        display: block !important;
        box-shadow: 0 0 0 0 transparent;

        .overlay-icon {
            opacity: 0;
            z-index: -1;
        }

        &.saving .overlay-icon {
            opacity: 1;
            z-index: auto;
        }

        .save-options:not(.show-button-bar) {
            .aui-button,
            .aui-button.cancel {
                height: 24px;
                padding: 0 4px;
            }
        }
    }

    /* Specific types editable fields relating to field types */

    &.type-radiobuttons,
    &.type-multicheckboxes {
        &.active {
            form.aui {
                border: 1px solid var(--ds-border, #ebecf0); /* jira previous fallback value: @aui-color-N30 */
                padding: 4px 5px;
            }
        }
    }

    &.type-cascadingselect form.aui .inline-edit-fields {
        select {
            width: 49%;

            + select {
                float: right;
            }
        }
    }

    /* JIRA Suite Utilities plugins Location Text Field Custom Field
    needs to be full width to display the map correctly. */

    &.type-locationtextfield,
    &.type-locationselect {
        display: block;
    }

    .overlay-icon {
        box-sizing: border-box;
        opacity: 0;
        background-color: var(--ds-surface, rgba(9, 30, 66, 0.13)); /* jira previous fallback value: @aui-color-N40A */
        background-repeat: no-repeat;
        background-position: 4px 4px;
        border-left: 1px solid var(--ds-border, #ebecf0); /* jira previous fallback value: @aui-color-N30 */
        bottom: 0;
        height: auto;
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        z-index: -1;

        &.throbber {
            background-image: url("/s/uajp63/11030007/1owio8b/11.3.6/_/download/resources/com.atlassian.jira.jira-issue-nav-components:issueviewer/issueviewer/images/wait.gif");
            border: 1px solid var(--ds-border, #ebecf0); /* jira previous fallback value: @aui-color-N30 */
        }

        &.aui-iconfont-edit {
            cursor: pointer;

            &::before {
                top: 12px;
                left: 3px;
            }
        }
    }

    .inline-edit-fields {
        &.show-button-bar {
            position: relative;
            z-index: 1;
        }
    }

    .save-options {
        background-color: var(--ds-surface, #fff); /* jira previous fallback value: @aui-color-N0 */
        border: 1px solid var(--ds-border, #dfe1e5); /* jira previous fallback value: @aui-color-N40 */
        border-top: none;
        border-radius: 0 0 3px 3px;
        outline: none;
        padding: 3px;

        &:not(.show-button-bar) {
            position: absolute;
            right: 0;
            top: 100%; /* so it "hangs" from the bottom */
            z-index: 1; /* so it appears over the top of content which appears after it on the page */
            box-shadow: var(--ds-shadow-overflow, 0 3px 6px rgba(111, 111, 111, 0.2));
        }

        &.show-button-bar {
            text-align: right;
            padding: 5px 10px;
            position: relative;
            margin-top: -2px;

            .field-tools {
                border-right: none;
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: -12px;
                text-align: left;
                padding-left: 10px;

                > * {
                    margin-right: 10px;
                }
            }

            &::after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
            }
        }

        &:not(.show-button-bar) .aui-button {
            + .aui-button {
                margin-left: 3px;
            }
        }

        .aui-button {
            .aui-iconfont-success {
                color: var(--ds-text-success, #707070);

                &::before {
                    font-size: 14px;
                }
            }

            .aui-iconfont-close-dialog {
                color: var(--ds-text, #707070);
            }

            &:hover,
            &:focus {
                .aui-iconfont-success {
                    color: var(--ds-text-success, #333);
                }

                .aui-iconfont-close-dialog {
                    color: var(--ds-text-selected, #333);
                }
            }
        }
    }

    /* Tweaks to AUI forms */

    form.aui {
        margin: -2px -30px -2px -5px; /* pull out equal to .editable-field padding */

        .group,
        .field-group {
            clear: none;
            margin: 0;
            padding: 0;

            &::after {
                clear: none;
            }
        }

        .field-group {
            .aui-ss,
            .jira-multi-select,
            .group,
            input[type=text],
            select,
            textarea,
            .text {
                text-align: left;
                vertical-align: top;
                max-width: none;
                width: 100%;
            }

            /* Single Select tweaks */

            .drop-menu,
            .jira-multi-select textarea,
            .aui-ss-field {
                border-bottom-right-radius: 0;
            }

            .inline-edit-error {
                background-color: var(--ds-background-danger, #d04437);
                clear: both;
                color: var(--ds-text-danger, #fff);
                font-weight: normal;
                margin: 0;
                padding: 5px;
            }

            + .field-group {
                background: var(--ds-surface, #fff); /* jira previous fallback value: @aui-color-N0 */
                border: 1px solid var(--ds-border, #ebecf0); /* jira previous fallback value: @aui-color-N30 */
                padding: 5px;

                label {
                    display: inline;
                    color: var(--ds-text, #707070);
                    float: none;
                    margin: 0;
                    padding: 0;
                    text-align: left;
                    width: auto;

                    &::after {
                        content: ": ";
                    }
                }

                .field-value {
                    font-weight: normal;
                    padding: 0;
                }
            }
        }

        /* ADG specific tweaks to inline editable aui form items */

        .aui-ss.aui-ss-has-entity-icon > .aui-ss-field {
            padding-left: 23px;
        }

        .aui-ss > .aui-ss-entity-icon {
            left: 5px;
        }

        .text,
        .password,
        .select {
            height: 1.71429em;
            line-height: 1;
            padding: 4px 3px;
        }

        .aui-ss-select.aui-ss-has-addon-icon {
            .text {
                padding-right: 47px; /* to make room for the .aui-ss-icon and for trigger */
            }

            .drop-menu {
                right: 24px;

                &::after {
                    content: '';
                }
            }
        }

        .text.aui-ss-field {
            padding-right: 23px; /* to make room for the .aui-ss-icon */
        }

        .select[multiple="multiple"] {
            min-height: 6em;
        }

        .textarea {
            padding: 2px 3px;
        }

        .select {
            padding: 0 3px;
        }

        .jira-multi-select > .representation .item-row {
            margin-top: 1px;
        }

        .jira-multi-select > .representation .item-row > .value-item {
            margin: 0;
        }

        .text,
        .password,
        .textarea,
        .select,
        .multi-select {
            box-shadow: var(--ds-shadow-overflow, 0 1px 3px #e8e8e8 inset);
        }
    }

    /* explicit form field styles */

    .text,
    .textarea,
    .has-addon-icon {
        + a {
            box-sizing: border-box;
            background-repeat: no-repeat;
            margin: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
            z-index: 1;

            .aui-icon {
                margin: 4px 0 0 3px;
                transform: none;
            }
        }

        + .aui-icon {
            box-sizing: border-box;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
            z-index: 1;
            margin: 4px 0 0 3px;
        }
    }

    /* icons that sit below certain custom fields like wiki-enabled textareas */

    .field-tools {
        border-right: 1px solid var(--ds-border, #dfe1e5); /* jira previous fallback value: @aui-color-N40 */
        display: inline-block;
        margin: 0 10px 0 5px;
        padding-right: 10px;

        a + a {
            margin-left: 5px;
        }
    }

    /* styling the wiki preview area */

    .wiki-edit-content.previewClass {
        border: 1px solid var(--ds-border, #dfe1e5); /* jira previous fallback value: @aui-color-N40 */
        padding: 10px;

        .content-inner {
            padding: 0;
        }
    }

    /* Things we want to hide for this view */

    .field-group > .help-lnk,
    .edit-labels,
    #assign-to-me-trigger,
    .description {
        display: none;
    }

    &.type-radiobuttons,
    &.type-multicheckboxes {
        .inline-edit-fields {
            outline: none;
        }
    }
}

.issue-body-content {
    .item-details dl > dt {
        box-sizing: border-box;
        padding: 2px 5px 2px 0;
    }

    .toggle-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.42857143;
        letter-spacing: -0.003em;
    }

    .item-details dl > dd {
        box-sizing: border-box;
        padding: 2px 0 2px 5px;

        .editable-field {
            margin: -2px 0 -2px -5px;
        }
    }

    .item-details dl {
        margin-top: 1px;
    }

    .m-link-module {
        position: relative;
    }

    .m-link-options {
        position: absolute;
        right: 0;
        top: 15px;
    }
}

/* Special styles for the main heading on the page */
#summary-val {
    margin-left: -5px;
    padding: 2px 30px 2px 5px;

    /* size the input field to match the h1 sizing to avoid a "jump" */

    .text {
        height: 1.66666666666667em; /* desired height = 40px. h1 text is 24px high. 40/24 = 1.66666666666667 */
        line-height: 1.2; /* desired line-height = 30px. h1 text is 25px high. 30/25 = 1.2 */
    }

    /* TF-284 - since .editable-field has no longer z-index, this is another fix for JRA-35490 */
    z-index: 1;
}

.aui-page-header-main {
    h2,
    #summary-val {
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }
}

/* JRADEV-20815 */
.editable-field #issuetype-single-select {
    max-width: none;
}

/* JRADEV-17592 - Get the editable description to line up with the heading */
#description-val.editable-field {
    margin: -2px 0 0 -5px;
    width: 100%;
}

.inline-edit-fields .wiki-button-bar {
    display: none;
}