@import "variables";

.with-selected {
    display: flex;
    min-height: 52px;
    align-items: center;
    border: 1px solid $color-grey-200;
    border-radius: 3px;
    padding: 6px 18px;

    vdr-select-toggle {
        margin-right: 12px;
    }

    > label {
        margin-right: 12px;
    }
}

.variant-container {
    transition: background-color 0.2s;
    min-height: 330px;
    &.disabled {
        background-color: $color-grey-200;
    }
    .header-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .variant-body {
        display: flex;
        flex-direction: column;
        @media screen and (min-width: $breakpoint-small) {
            flex-direction: row;
        }
    }

    .details {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-right: 12px;
        @media screen and (min-width: $breakpoint-small) {
            flex-direction: row;
            height: 36px;
        }
        .name {
            flex: 1;
            ::ng-deep .clr-control-container {
                width: 100%;
                input.clr-input {
                    min-width: 100%;
                }
            }
        }

        .sku {
            width: 160px;
            margin-right: 20px;
            flex: 0;
        }

        ::ng-deep .name input {
            min-width: 300px;
        }
    }

    .right-controls {
        display: flex;
    }

    .tax-category-label {
        margin-top: 3px;
    }

    .variant-form-inputs {
        flex: 1;
        display: flex;
        flex-direction: column;
        @media screen and (min-width: $breakpoint-small) {
            flex-direction: row;
        }
    }

    .variant-form-input-row {
        display: flex;
        flex-wrap: wrap;
        @media screen and (min-width: $breakpoint-small) {
            margin: 0 6px 8px 24px;
        }

        > * {
            margin-right: 24px;
            margin-bottom: 24px;
        }
    }

    .track-inventory-toggle {
        margin-top: 22px;
    }

    .clr-form-control {
        margin-top: 0;
    }

    .facets {
        display: flex;
        align-items: center;
    }

    .pricing {
        display: flex;
        > div {
            margin-right: 12px;
        }
    }

    .option-group-name {
        color: $color-grey-400;
        text-transform: uppercase;
        font-size: 10px;
        margin-right: 3px;
        height: 11px;
    }

    .options-facets {
        display: flex;
        color: $color-grey-400;
    }
}

.out-of-stock-threshold-wrapper {
    display: flex;
    flex-direction: column;
    clr-toggle-wrapper {
        margin-left: 24px;
    }
}

.inventory-untracked {
    opacity: 0.5;
}

.table-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
}
