/**
 * React Toolbox Snackbar overrides.
 * Overall these overrides focus on making flexbox work properly across all platforms.
 */
.snackbar {
    /**
     * Target Platforms: ALL
     * Use roboto or sans-serif as this is a react toolbox component that is looking for other fonts
     */
    font-family: Roboto, sans-serif;

    /**
     * Target Platforms: ANDROID4
     * Use space between to allow the button to right align on android 4.x
     */
    justify-content: space-between;
}

.snackbar > span {
    /**
     * Target Platforms: ANDROID4 IE10
     * Use display block to allow the text content to wrap to multiple lines on android 4.x and ie10
     */
    display: block;

    /**
     * Target Platforms: IE10
     * Calculate the width to force ie10 to not push the button to a new row, 180px is the spac needed for the button
     */
    width: calc(100% - 180px);
}

.snackbar button {
    /*
     * Target Platforms: ALL
     * Use margin-left: auto to right align the button on modern implementations of flexbox
     */
    margin-left: auto;

    /*
     * Target Platforms: ALL
     * Override the react toolbox button size and color
     */
    font-size: 14px;
    color: #F44336 !important;
}