.toggle-button {
    padding: 1px 5px;
    background-color: transparent;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid transparent;
}

    .toggle-button.enabled:hover {
        background-color: fuchsia; /*[{DetailsView-CommandBarMouseOverBackground-Background}]*/
        color: lawngreen; /*[{Environment-CommandBarTextHover-Background}]*/
        border: 1px solid lawngreen; /*[1px solid {Environment-CommandBarBorder-Background}]*/
    }

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

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

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

        .toggle-button.toggled.enabled:hover {
            background-color: fuchsia; /*[{DetailsView-CommandBarHoverOverSelected-Background}]*/
            color: lawngreen; /*[{Environment-CommandBarTextHoverOverSelected-Background}]*/
            border: 1px solid lawngreen; /*[1px solid {Environment-CommandBarHoverOverSelectedIconBorder-Background}]*/
        }

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

.toggle-button > .button-text {
    margin-left: 4px;
}

    .toggle-button:not(.enabled) > .button-image svg .icon-vs-bg {
        fill: fuchsia; /*[{Environment-CommandBarTextInactive-Background}]*/
    }

    .toggle-button:not(.enabled) > .button-image svg .icon-vs-out {
        fill: transparent;
    }

    /* reset the default IE button:active animation */
    .toggle-button:active * {
        position: relative;
    }