toggle-single-button
  display block
  margin 8px 0
  che-box-shadow()

  $button-enabled-background-color = #EAEFF5
  $button-disabled-background-color = $background-color
  $button-enabled-color = $primary-color
  $button-disabled-color = lighten($che-ide-background-color, 52%)
  $button-enabled-border-color = $primary-color
  $button-disabled-border-color = $box-border-color

  che-border-radius(2px)

  .md-button
    height 20px
    line-height 20px
    margin 0 -1px 0 0
    z-index 1
    border-radius: 2px !important;
    font-size: 1em;
    width: auto;
    padding-left: 10px;
    text-transform: capitalize;
    font-weight: normal;
    color $button-enabled-color
    border 1px solid $button-enabled-border-color
    background-color $button-enabled-background-color

    .toggle-single-button-title
      text-transform none

    .toggle-single-button-singleline
      overflow hidden
      text-overflow ellipsis

    .toggle-single-button-multiline
      white-space normal
      line-height 16px
      max-height 32px
      overflow-y hidden
      text-align center

    .toggle-single-button-icon
      width 45px
      min-width 45px

      md-icon
        color inherit
        vertical-align initial
        margin-left 0
        margin-right 10px

    &:not(.toggle-single-button-disabled):hover
      background-color darken($button-enabled-background-color, 5%)

    &.toggle-single-button-disabled
      color $button-disabled-color
      background-color $button-disabled-background-color
      border-color $button-disabled-border-color
      padding-top 0
      z-index 0

      &:hover
        background-color darken($button-disabled-background-color, 5%)

  md-icon
    padding-right 10px
    font-size 20px
    width auto
    height auto
