@import '../../_widgetsCommon.scss';
.bolt-table-container {
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 0 0;
        text-decoration: none;
        transition: background 80ms linear;

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

        &.bolt-list-box-multi-select-row {
            gap: 10px;
            padding: 0 20px 0 16px;
        }

        &: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: Highlight;
                color: HighlightText;
                forced-color-adjust: none;
            }

            @include theme-high-contrast {
                forced-color-adjust: none;
                background: Highlight;
                color: HighlightText;
            }

            .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: Highlight;
                color: HighlightText;
                forced-color-adjust: none;
            }

            @include theme-high-contrast {
                forced-color-adjust: none;
                background: Highlight;
                color: HighlightText;
            }
        }

        &.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 0;
        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;
}
}