.menu-button {
    -fx-background-radius: 5px;
    -fx-border-radius: 4px;
    -fx-background-color: -df-component-dark;
    -fx-background-insets: 0;
    -fx-border-color: -df-component-darker;
    -fx-border-width: 1;

    >.label {
        -fx-text-fill: -df-text;

        >.icon-graphic {
            -fx-background-color: -df-text;
        }
    }

    >.arrow-button {
        >.arrow {
            -fx-background-color: -df-text;
        }
    }

    &:hover {
        -fx-background-color: -df-component-lighter;

        >.label {
            -fx-text-fill: -df-text-selected;

            >.icon-graphic {
                -fx-background-color: -df-text-selected;
            }
        }

        >.arrow-button {
            >.arrow {
                -fx-background-color: -df-text-selected;
            }
        }
    }

    &:showing {
        -fx-background-color: -df-component-light;
        -fx-text-fill: -df-text-selected;

        >.label {
            -fx-text-fill: -df-text-selected;

            >.icon-graphic {
                -fx-background-color: -df-text-selected;
            }
        }

        >.arrow-button {
            >.arrow {
                -fx-background-color: -df-text-selected;
            }
        }
    }

    &.button-icon {
        >.label {
            -fx-alignment: center;
            -fx-padding: 0;
        }

        >.arrow-button {
            -fx-padding: 0;
            visibility: hidden;

            >.arrow {
                -fx-padding: 0;
                visibility: hidden;
            }
        }
    }
}
