[CSS] ComboBox size issue with custom CSS

Execute the test below - when a combo is opened the popup width is larger than the combobox. When selecting an item from the popup the width of the combo control changes - the effect is more noticeable for the ReadOnly combo. Please also note that the right border color of the popup is a bit different (blurry) - not quite sure if related to the size issue.

Test class:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class ComboBoxTest extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage)
    {
        System.err.println(System.getProperty("javafx.runtime.version"));
        Application.setUserAgentStylesheet(getClass().getResource("style.css").toExternalForm());

        Parent content = createContent();
        Scene scene = new Scene(content, 800, 600);

        stage.setScene(scene);
        stage.show();
    }

    public Parent createContent()
    {
        final FlowPane content = new FlowPane(10, 10);
        content.setPadding(new Insets(60));
        content.getChildren().add(createComboBox(false, false));
        content.getChildren().add(createComboBox(true, false));
        return content;
    }

    private ComboBox<String> createComboBox(boolean readonly, boolean disabled)
    {
        ComboBox<String> combo = new ComboBox<String>();
        combo.setItems(FXCollections.<String>observableArrayList("Regular", "ReadOnly", "Disabled", "Disabled/ReadOnly"));
        combo.setDisable(disabled);
        combo.setEditable(!readonly);
        if (readonly && disabled)
            combo.setValue("Disabled/ReadOnly");
        else if (readonly)
            combo.setValue("ReadOnly");
        else if (disabled)
            combo.setValue("Disabled");
        else
            combo.setValue("Regular");
        return combo;
    }
}


Stylesheet (style.css):

 .root {
-fx-font: 11 Tahoma;
    -fx-text-fill: black;
}

 .text {
    -fx-text-fill: #F00;
    -fx-font-smoothing-type: lcd;
}

.combo-box-base{
    -fx-background-color: #0FF;
    -fx-padding: 2 2;
}

.combo-box-base:editable{
    -fx-background-color: #FF0;
}

.combo-box-base:editable > .text-field {
    -fx-border-image-source: null;
    -fx-background-color: transparent;
    -fx-padding: 1 0;
}

.combo-box-base > .arrow-button {
   -fx-background-color: red;
   -fx-padding: 0 4;
  }

.combo-box-base > .arrow-button > .arrow {
    -fx-background-color: black;
    -fx-background-insets: 0 0 0 0;
    -fx-padding: 2 4;
    -fx-shape: "M 0 0 H 7 L 3.5 4 z";
}

.combo-box-popup > .list-view {
    -fx-border-style: solid;
    -fx-border-width: 1;
    -fx-border-color: black;
    -fx-background-color: white;
    -fx-background-insets: 0, 1;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 1 10;
    -fx-background: red;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-background: green;
    -fx-background-color: orange !important;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background-color: silver !important;
}
.combo-box-popup > .list-view > .placeholder > .label {
    -fx-text-fill: blue;
}