@import "../../../ui/imports/mixins/text-overflow";
@import "../../../ui/imports/mixins/aui/dropdowns";
@import "../dropdown/dropdown-variables";

.aui-list {
    ul {
        .dropdown-list();
    }

    .aui-list-item-link {
        .dropdown-item-block();
        .text-overflow();

        position: relative;

        em { // Things that are "marked" when performing autocomplete are wrapped in <em>
            font-style: normal;
            font-weight: bold;
        }

        &.aui-iconised-link {
            background-position: 10px 5px;
            background-repeat: no-repeat;
            -moz-background-size: 16px;
            background-size: 16px;
            padding-left: 31px;
            .icon {
                float: left;
                margin: 2px 0 0 -21px;
                &.rounded {
                    border-radius: 50%;
                }
            }
        }

        &.aui-indented-link {
            padding-left: 25px;
        }
    }

    .aui-list-section-footer {
        .dropdown-item-block();
        .text-overflow();
        font-style: italic;
    }

    .no-suggestions {
        .dropdown-item-block();
        font-style: italic;

        .view-all {
            display: block;
            margin: 0;
            padding: 0;
        }
    }

    a:link,
    a:visited {
        .dropdown-item-style(normal);
    }

    a:hover,
    a:focus {
        text-decoration: none;
    }

    a.active,
    .aui-list-item.active > a {
        .dropdown-item-style(focus);
    }

    a.disabled {
        .dropdown-item-style(disabled);
    }

    .aui-list-checked {
        position: relative;
        padding-left: 20px;

        &.aui-checked::before {
            position: absolute;
            content: '';
            left: 8px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            display: block;
            border-radius: 50%;
            width: 5px;
            height: 5px;
            background: var(--aui-item-text, var(--ds-text, #172b4d));
        }
    }

    .aui-list-scroll {
        max-height: @jira-dropdown-max-height;
    }
}

form.aui {
    .aui-list {
        legend { // section title
            .dropdown-heading();
            + .aui-list-section {
                padding-top: 0;
            }

            /* styles mimic what was originally h5 */
            /* but due to accessibility needs, we use legend instead */
            /* and thus a set of overwrites are needed */
            color: var(--ds-text-subtle, #6b778c);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            display: block;
            padding: 7px 10px;
            float: none;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            margin-left: 0;
        }

        .aui-list-section { // section dividers
            + legend,
            + .aui-list-section {
                border-top: 1px solid var(--ds-border, @jira-dropdown-divider-color);
            }
        }

        .aui-list-scroll legend {
            border-top: 1px solid var(--ds-border, #dfe1e5);
        }

        .aui-list-scroll *:first-child legend {
            border-top: none;
        }
    }
}