@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-list-row {
    display: table-row;
    outline: none;
    text-decoration: none;
    transition: background 80ms linear;

    &:hover {
        background-color: $list-row-hover-color;

        @include ms-high-contrast-highlight(2px);

        .bolt-list-cell-content-reveal {
            visibility: visible;
        }
    }

    &.focused {
        .bolt-list-cell-content-reveal {
            visibility: visible;
        }
    }

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

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

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

.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;
    position: relative;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;

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

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

.bolt-list-cell-content-reveal {
    visibility: hidden;
}
.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 {
    @include ms-high-contrast-highlight(2px);
}

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