.block-batch-quantity-picker {
    --border-thickness: var(--variant-selector-border-thickness);
    --border-color: rgba(var(--color-text),
            var(--variant-selector-border-opacity));
    --border-radius: var(--variant-selector-border-radius);
    --option-padding-block: 10px;
    --option-padding-inline: 16px;

    display: flex;
    flex-direction: column;
    gap: var(--info-row-gap);
}

.block-batch-quantity-picker .batch-quantity-picker__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
}

.block-batch-quantity-picker .batch-quantity-picker__label,
.block-batch-quantity-picker .batch-quantity-picker__price-label {
    flex: 1;
}

.block-batch-quantity-picker .batch-quantity-picker__price-label {
    text-align: right;
}

.block-batch-quantity-picker .batch-quantity-picker__options {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.block-batch-quantity-picker .batch-quantity-picker__option {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--option-padding-block) var(--option-padding-inline);
    cursor: pointer;
    transition: background-color 0.2s;
}

.block-batch-quantity-picker .batch-quantity-picker__option:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.block-batch-quantity-picker .batch-quantity-picker__option:hover {
    background-color: rgba(var(--color-text), 0.03);
}

.block-batch-quantity-picker .batch-quantity-picker__option input[type="radio"] {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.block-batch-quantity-picker .batch-quantity-picker__option:has(input[type="radio"]:checked) {
    background-color: rgba(var(--color-text), 0.06);
}

.block-batch-quantity-picker .batch-quantity-picker__option input[type="radio"]:checked~.batch-quantity-picker__quantity,
.block-batch-quantity-picker .batch-quantity-picker__option input[type="radio"]:checked~.batch-quantity-picker__price {
    font-weight: bold;
}

.block-batch-quantity-picker .batch-quantity-picker__quantity {
    flex: 1;
}

.block-batch-quantity-picker .batch-quantity-picker__price {
    flex: 1;
    text-align: right;
    color: rgb(var(--color-sale-price, var(--color-text)));
}

.block-batch-quantity-picker .batch-quantity-picker__option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}