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

.CatalogTable {
    .FlexibleTable {
        &-product {
            @include flex-column(260px, 4);
        }

        &-project {
            @include flex-column(145px, 3);
        }

        &-artist {
            @include flex-column(145px, 3);
        }

        &-type {
            @include flex-column(145px, 2, 200px);
        }

        &-release-date {
            @include flex-column(128px, 1, 128px);
        }

        &-sales-date {
            @include flex-column(114px, 1, 125px);
        }

        &-preorder-date {
            @include flex-column(114px, 1, 125px);
        }

        &-status {
            @include flex-column(150px);
        }

        &-cell {
            border-bottom: 1px solid var(--gray-200);
            font-size: 12px;
            padding: 10px;
        }
        &-header .FlexibleTable-cell {
            cursor: pointer;
            margin-bottom: 0;
            margin-top: 0;
            vertical-align: middle;
            white-space: initial;
            &:active .CatalogTable-sort-hidden,
            &:hover .CatalogTable-sort-hidden {
                display: inline;
                opacity: .6;
            }
        }
    }

    &-product {
        &-container {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            width: 100%;
        }

        &-icon {
            margin-right: 20px;
            min-width: 40px;
            width: 40px;

            &-image {
                width: 100%;
            }
        }
        &-title {
            flex: 1;
            max-width: calc(100% - 60px);

            @include ellipsisWrap();
        }
        &-title-upc {
            color: var(--gray-500);
            margin-top: 5px;
        }
    }

    &-project {
        &-container {
            overflow: hidden;
        }

        &-code {
            color: var(--gray-500);
            margin-top: 5px;

            @include ellipsisWrap();
        }
    }

    &-artist-name {
        @include ellipsisWrap();
    }

    &-type {
        &-container {
            display: flex;
        }
        &-icon {
            margin-right: 5px;
            margin-top: 2px;
        }
        &-name {
            line-height: 20px;
        }
    }

    &-status {
        display: inline-block;
        vertical-align: top;
        &-sent-to {
            color: var(--gray-500);
            font-size: 11px;
            margin-left: 27px;
        }

        &-wrapper {
            display: inline-block;
            font-weight: 500;
        }

        &-container {
            border-radius: 10px;
            display: flex;
            padding: 0 10px;

            &:not(.CatalogTable-status-disabled):hover {
                background: var(--white);
                cursor: pointer;
            }
        }
        &-icon {
            margin-right: 5px;

            svg {
                vertical-align: middle;
            }
        }
        &-link-icon {
            margin-left: 5px;
        }
        &-name {
            color: var(--gray-500);
            font-size: 10px;
            line-height: 20px;
            text-transform: uppercase;
        }
    }
    &-sort {
        height: 16px;
        margin-left: 5px;
        position: relative;
        vertical-align: top;
        width: 16px;

        &-hidden {
            display: none;
        }
    }
    &.loading .FlexibleTable-cell > div {
        width: 100%;
    }

    &-delivery-link {
        font-size: 11px;
        margin-left: 27px;
    }
}