.toolbar-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 3px;
    background-color: fuchsia; /*[{CommonControls-InnerTabActiveBackground-Background}]*/
}

    .toolbar-container > * {
        margin: auto 3px;
    }

    /* We only collapse text if there is an icon */
    .toolbar-container.limitedSpace button>.icon ~ * {
        display: none;
    }

    /* If we have an icon and text then give some margin between the two */
    button.toolbar-button > .icon + *, button.toggleButton > .icon + * {
        margin-left: 3px;
    }

.toolbar-separator {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 1px;
    background-color: chartreuse; /*[{Environment-CommandBarToolBarSeparator-Background}]*/
}

/* The button.* rules are so each selector is specific enough to override default styles injected by daytona */
/* Hyperlink buttons */
button.hyperlink-button, button.toolbar-button.hyperlink-button {
    padding: 0px;
    cursor: pointer;
    background-image: none; /*This overrides a background image injected by Plugin.css*/
    background-color: transparent;
    color: fuchsia; /*[{DiagnosticsHub-Hyperlink}]*/
    border: none;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-justify-content: center;
    justify-content: center;
    border-color: transparent;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    button.hyperlink-button:disabled, button.toolbar-button.hyperlink-button:disabled {
        color: deeppink; /*[{diagnostics-host-toolbar-text-disabled}]*/
        background-color: transparent;
        border: none;
        cursor: not-allowed;
    }

    button.hyperlink-button:enabled:hover, button.toolbar-button.hyperlink-button:enabled:hover {
        color: fuchsia; /*[{DiagnosticsHub-HyperlinkHover}]*/
        text-decoration: underline;
        background-color: transparent;
        border-color: transparent;
    }

    button.hyperlink-button:enabled:focus, button.toolbar-button.hyperlink-button:enabled:focus {
        color: fuchsia; /*[{DiagnosticsHub-HyperlinkHover}]*/
        text-decoration: underline;
        background-color: transparent;
        border-color: transparent;
    }

/* Toolbar buttons (Command Shelf buttons) */
button.toolbar-button, button.toggleButton {
    background-image: none; /*This overrides a background image injected by Plugin.css*/
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 1px 7px;
    color: chartreuse; /*[{Environment-CommandBarTextActive-Background}]*/
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Reset the injected min-width from daytona. Despite the CSS spec saying the value should be 'initial', only 'auto' works for our purposes. */
    min-width: auto;
}

    button.toolbar-button.enabled:hover, button.toggleButton.enabled:hover {
        background-color: fuchsia; /*[{Environment-CommandBarMouseOverBackgroundBegin-Background}]*/
        color: lawngreen; /*[{Environment-CommandBarTextHover-Background}]*/
        border: 1px solid lawngreen; /*[1px solid {Environment-CommandBarBorder-Background}]*/
    }

    button.toolbar-button.enabled:active, button.toggleButton.enabled:active {
        background-color: fuchsia; /*[{Environment-CommandBarMouseDownBackgroundBegin-Background}]*/
        color: lawngreen; /*[{Environment-CommandBarTextMouseDown-Background}]*/
        border-color: fuchsia; /*[{Environment-CommandBarBorder-Background}]*/
    }

button.toggleButton.checked {
    background-color: fuchsia; /*[{Environment-CommandBarSelected-Background}]*/
    color: lawngreen; /*[{Environment-CommandBarTextSelected-Background}]*/
    border-color: lawngreen; /*[{Environment-CommandBarSelectedBorder-Background}]*/
}

    button.toggleButton.checked:not(.enabled) {
        color: lawngreen; /*[{Environment-CommandBarTextInactive-Background}]*/
    }

    button.toggleButton.checked.enabled:hover {
        background-color: fuchsia; /*[{Environment-CommandBarMouseOverBackgroundBegin-Background}]*/
        color: lawngreen; /*[{Environment-CommandBarTextHoverOverSelected-Background}]*/
        border: 1px solid lawngreen; /*[1px solid {Environment-CommandBarHoverOverSelectedIconBorder-Background}]*/
    }

    button.toggleButton.checked.enabled:active {
        background-color: fuchsia; /*[{Environment-CommandBarMouseDownBackgroundBegin-Background}]*/
        color: lawngreen; /*[{Environment-CommandBarTextMouseDown-Background}]*/
        border-color: fuchsia; /*[{Environment-CommandBarBorder-Background}]*/
    }