@mixin flex-column($min-width: 0, $relative-width: 1, $max-width: none) {
    flex-grow: $relative-width;
    flex-shrink: $relative-width;
    max-width: $max-width;
    min-width: $min-width;
}

.FlexibleTable {
    background: white;
    max-width: 100%;
    overflow-y: auto;
    width: 100%;

    &-row:hover:not(.FlexibleTable-header) {
        background-color: var(--gray-100);

        .FlexibleTable-pinned {
            background-color: var(--gray-100);
        }
    }
    &-header {
        border-bottom: 3px solid var(--gray-200);
        box-sizing: border-box;
        color: var(--gray-500);
        font-size: 12px;
        font-weight: 500;
        padding: 0;
        text-transform: uppercase;
        white-space: nowrap;
        .FlexibleTable-cell {
            padding-bottom: 5px;
            padding-top: 5px;
        }
    }
    &-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    &-cell {
        @include flex-column();
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-basis: 0;
        overflow: hidden;
        padding: 10px 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
    }
    &-pinned + &-cell {
        padding-left: 15px;
    }
    &-pinned {
        background: white;
        box-shadow: 4px 0 6px -2px rgba(0, 0, 0, .1);
        left: 0;
        padding-right: 10px;
        position: sticky;
        position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
        z-index: 2;
    }
}