@import '../../_widgetsCommon.scss';
.dropdown-list-component-enabled {
    ul.bolt-list {
        color: $primary-text;
        cursor: default;
        margin: 0;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;

        .bolt-fixed-height-list-row {
            width: 100%;
        }

        .bolt-list-row {
            color: inherit;
            display: flex;
            align-items: baseline;
            outline: none;
            padding: 0 20px;
            text-decoration: none;
            transition: background 80ms linear;

            @include theme-high-contrast {
                transition: none;
            }

            &:hover:not(.bolt-list-box-header-row, .bolt-list-box-divider-row) {
                background-color: $list-row-hover-color;

                .bolt-list-cell-content-reveal {
                    opacity: 100;
                }

                @include ms-high-contrast-override {
                    background: Canvas;
                    forced-color-adjust: none;

                    & td {
                        forced-color-adjust: auto;
                    }
                }

                &:not(.bolt-menuitem-divider, .comment-item) {
                    @include theme-high-contrast {
                        background: $focus-border-color;
                        color: $backgroundColor;
                    }
                }

                .secondary-text {
                    @include theme-high-contrast {
                        color: $backgroundColor;
                    }
                }

                .list-item-label {
                    @include theme-high-contrast {
                        color: $focus-border-color;
                    }
                }
            }

            &.focused {
                .bolt-list-cell-content-reveal {
                    opacity: 100;
                }

                @include ms-high-contrast-override {
                    background: Canvas;
                    forced-color-adjust: none;

                    & td {
                        forced-color-adjust: auto;
                    }
                }

                &:not(.comment-item) {
                    @include theme-high-contrast {
                        background: $focus-border-color;
                        color: $backgroundColor;
            
                        .secondary-text {
                            color: $backgroundColor;
                        }
                    }
                }
            }

            &.selected {
                background-color: $list-row-select-color;
                outline: none;

                @include ms-high-contrast-override {
                    background: Canvas;
                    forced-color-adjust: none;
                }

                @include theme-high-contrast {
                    background: $focus-border-color;
                    color: $backgroundColor;
                }

                .bolt-button.bolt-focus-treatment:focus,
                .bolt-checkbox.bolt-focus-treatment:focus .bolt-checkmark {
                    @include ms-high-contrast-override {
                        border-color: Background;
                    }
                }

                .bolt-list-cell:first-child {
                    border-width: 2px;
                }
            }

            &:hover.selected {
                background-color: $list-select-cell-action-hover-color;

                @include ms-high-contrast-override {
                    background-color: Canvas;
                }

                @include theme-high-contrast {
                    background: $focus-border-color;
                    color: $backgroundColor;
                }
            }

            &.single-click-activation {
                cursor: pointer;
            }
        }

        .bolt-list-row-no-hover:hover {
            background-color: initial;
        }

        .bolt-list-row-header:hover,
        .bolt-list-row-loading:hover {
            background-color: initial;
            cursor: default;
        }

    .bolt-list-cell {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: left;
        text-decoration: none;
        white-space: nowrap;

        &:first-child:not(.bolt-table-cell-select) {
            border-left: 2px solid transparent;
            width: 100%;
            max-width: unset;
            min-width: unset;
        }

        &:last-child {
            border-right: 1px solid transparent;
        }
    }

    .selected .bolt-list-cell {
        &:first-child {
            border-left: 2px solid transparent;
        }
    }

        .bolt-list-cell-content-reveal {
            opacity: 0;
        }

        .bolt-list-cell-text {
            overflow: hidden;
        }

        .bolt-focus-visible .bolt-list-row:focus .bolt-list-cell {
            border-color: $list-row-select-focus-border-color;
        }

        .bolt-focus-visible .bolt-list-row:focus .bolt-list-cell {
            @include ms-high-contrast-override {
                background-color: highlight;
            }
        }

        .bolt-focus-visible .bolt-list-row:focus {
            @include ms-high-contrast-highlight(3px, double);
            @include ms-high-contrast-override {
                forced-color-adjust: none;

                & a {
                    forced-color-adjust: auto;
                }

                & > td > * {
                    forced-color-adjust: auto;
                }
            }
        }

        // The "bolt-list-row-marked" class may be applied to
        // list rows to get a 2px blue tick on the side of the row
        .bolt-list-row-marked .bolt-list-cell:first-child {
            border-left: 2px solid $communication-tint-10;
        }

        .bolt-list-overlay-container {
            width: 100%;
        }

        .bolt-list-overlay {
            pointer-events: none;
            width: 100%;
        }

        .bolt-list-drag-source-item {
            background-color: var(--component-grid-drag-source-color);
        }

        .bolt-drag-image-portal {
            z-index: 100;
        }

        .bolt-drag-image {
            background-color: $calloutBackgroundColor;
            height: 40px;
            width: 320px;
            padding: 0px 8px;
        }

        .bolt-table-cell-content:not(.favorites-item-list) {
            padding: .375rem .75rem;
            overflow: hidden;
        }

        .bolt-table-cell-select {
            align-self: center;
        }
    }

    li.bolt-list-box-loading-row {
        justify-content: center;
    }

    .bolt-list-box-loading-row {
        span {
            max-width: fit-content !important;
        }
    }

    .dropdown-list.artifact-list-item {
        flex-grow: 1;
    }

    .directory-dropdown-content {
        .bolt-list-cell {
            flex-grow: 1;
        }
    }

    span.dropdown-list.bolt-table-cell.bolt-list-cell {
        flex-grow: 1;
    }
}