@import '../../_widgetsCommon.scss';
.bolt-list {
    border-spacing: 0 0;
    color: $primary-text;
    cursor: default;
    display: table;
    table-layout: fixed;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    /* IE11: Limit the width of the list to prevent it from growing out of control */
    @include ie-only {
        max-width: 100vw;
    }
}

// @OLD-PLATFORM-OVERRIDE The old web platform sets border-collapse: collapse, which will almost always
// come in after this selector. Forcing this to be two levels of selectivity so that it still wins
// over the old platform selector.
.bolt-list.bolt-list {
    border-collapse: separate;
}

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

.bolt-list-row {
    color: inherit;
    display: table-row;
    outline: none;
    text-decoration: none;
    transition: background 80ms linear;

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

    &:hover {
        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, .selected) {
            @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;

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

        @include theme-high-contrast {
            background: transparent;

            .bolt-list-cell:first-child {
                border-left: 2px solid $focus-border-color;
            }
        }

        .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-left: 2px solid $list-row-select-focus-border-color;
        }
    }

    &: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;
    color: inherit;
    display: table-cell;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;

    &:first-child {
        border-left: 2px solid transparent;
    }

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

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

.bolt-list-cell-spacer {
    padding: 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-cv-optimized .bolt-list-overlay-container {
    isolation: isolate;
}

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

    .bolt-list-drop-additional-indicator {
        background-color: $status-success-background;
    }
}

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

// When the perf flag is on, the JS adds .bolt-list-cv-optimized to the table.
// This scopes content-visibility: auto to only the optimized path so the
// non-optimized path retains reliable row geometry for getBoundingClientRect().
.bolt-list-cv-optimized .bolt-list-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 32px;
    transition-behavior: allow-discrete;
}