.split-menu-button {
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
    -fx-min-width: 10em;
    -fx-background-color: -df-background;
    -fx-background-insets: 0;
    -fx-border-color: -df-background-lighter;
    -fx-border-width: 1;
    -fx-padding: 0;
    -fx-text-fill: -df-background-lighter;

    &:showing {
        -fx-background-color: -df-background;
        -fx-text-fill: -df-text-selected;
        .label {
            -fx-text-fill: -df-text-selected;
        }
        .arrow {
            -fx-text-fill: -df-text-selected;
            -fx-background-color: -df-text-selected;
        }
    }
    .label {
        -fx-background-color: transparent;
        -fx-border-width: 0;
        -fx-background-insets: 0;
        -fx-text-fill: -df-text-dark;

        &:hover {
            -fx-background-color: -df-background;
        }
        &:pressed {
            -fx-text-fill: -df-text-selected;
        }
    }
    .arrow-button {
        -fx-background-insets: 0;
        -fx-background-color: transparent;
        -fx-border-width: 0 0 0 1;
        -fx-border-color: -df-component-light;

        &:hover {
            -fx-background-color: -df-background;
        }
    }
}
