@import '~react-virtualized/styles.css';
@import '../../styles/variables';

.bdl-VirtualizedTable {
    .ReactVirtualized__Table__Grid {
        padding-bottom: 20px;
        outline: none;
    }

    .ReactVirtualized__Table__headerColumn {
        color: $bdl-gray-62;
        font-weight: normal;
        text-transform: none;
    }

    .ReactVirtualized__Table__headerColumn,
    .ReactVirtualized__Table__rowColumn {
        margin: 0 15px;
    }

    .ReactVirtualized__Table__sortableHeaderColumn {
        display: flex;
        user-select: none;

        &:focus,
        &:hover {
            outline: none;

            .ReactVirtualized__Table__headerTruncatedText {
                text-decoration: underline;
            }
        }
    }

    .ReactVirtualized__Table__rowColumn {
        color: $bdl-gray-50;
    }

    .ReactVirtualized__Table__row,
    .ReactVirtualized__Table__headerRow {
        border-bottom: 1px solid $bdl-gray-10;
    }

    .ReactVirtualized__Table__row:focus {
        outline: none;

        &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: $bdl-gray-30;
            content: '';
        }
    }

    .ReactVirtualized__Table__row:hover {
        .VirtualizedTable-link,
        .ReactVirtualized__Table__rowColumn {
            color: $bdl-secondary-blue;
        }

        .VirtualizedTable-link {
            text-decoration: underline;
        }
    }

    .ReactVirtualized__Table__row {
        &:hover,
        &.is-selected {
            background-color: $hover-blue-background;
        }
    }

    .VirtualizedTable-link {
        overflow: hidden;
        color: $bdl-gray;
        white-space: nowrap;
        text-decoration: none;
        text-overflow: ellipsis;

        &:focus {
            text-decoration: underline;
        }
    }

    .VirtualizedTable-icon {
        margin-right: 10px;
        line-height: 1;
    }

    .VirtualizedTable-sortIcon {
        @include bdl-transition($bdl-transitionDurationBase, transform);

        margin: 0 4px;
        cursor: pointer;

        &.is-ascending {
            transform: rotate(180deg);
        }
    }

    .VirtualizedTable-routerLinkCell {
        display: flex;
        align-items: center;
    }

    .bdl-Ghost {
        display: block;
    }
}