@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;
    &.disabled {
        background-color: $color-grey-200;
    }
    .header-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .variant-body {
        display: flex;
    }

    .details {
        display: flex;
        flex: 1;
        height: 36px;
        margin-right: 12px;

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

    .variant-form-input-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 6px 32px 24px;

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

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

    .flex-spacer {
        flex: 1;
    }

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

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

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

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