@import './../../../style/variables.css';

:root {

}
 
@component manageReviewTitles {
    display: block;
    lost-column: 2/3;
    padding: 15px;
    @apply --w-table-component;
    color: var(--gray);
    font-size: 12px;


    @descendent reviewTitlesTable {
        overflow: hidden;
        & table {
            margin: 0;
            border: none;
            background-color: white;
        }
        & thead > tr > th {
            background-color: var(--seashell);
            font-weight: normal;
            vertical-align: middle;
            font-size: responsive 9px 12px;
            font-range: 900px 1200px;
        }
        & tbody > tr > td {
            vertical-align: middle;
        }
        & .table-title {
            text-transform: uppercase;
        }

        & .col-review-title {
            width: 35%;
        }
        & .col-linked-prod {
            width: 25%;
            & .col-linked-prod-container {
                display: flex;
                align-items: center;
                justify-content: center;
                & .linked-prod-text {
                    width: calc(100% - 40px);
                    float: left;
                }
            }
        }
        & .col-move-prod {
            min-width: 166px;
        }
        & .col-sku {
            min-width: 195px;
            & .actions {
                width: calc(100% - 120px);
                float: left;
            }
            & .sku {
                width: 120px;
                float: left;
                line-height: 20px;
            }
        }
        & .ui-select-container {
            width: 120px;
            float: left;
        }
        & .table-input {
            @apply --w-table-input;
        }
        & button.table-button {
            @apply --w-table-button;
        }
    }

}
.ui-select-container {
    & .form-control {
        height: 20px;
        padding: 0 0 0 3px;
        font-size: 10px;
        line-height: 20px;
    }
}