@import font-awesome
span.icon
  @extend .fa
  @extend .fa-lg
  &.needs-help
    @extend .fa-bell
  &.needs-payment
    @extend .fa-money
.fa-stack
  .revoke
    color: #b94a48

.button-icon
  display: inline-block
  width: 2em
  height: 2em
  line-height: 2em
  vertical-align: middle
  background-repeat: no-repeat
  background-position: center center
.mark-order-active .button-icon
  background-image: image-url('supplier/order-check.png')
.mark-order-delivered .button-icon
  background-image: image-url('supplier/order-doublecheck.png')

//.fa-shifted-stack
  @extend .fa-stack
//.fa-shifted-stack
  position: relative
  display: inline-block
  width: 2.5em
  height: 2em
  //line-height: 2em
  vertical-align: middle
  .fa
    position: absolute
    width: 100%
    left: 20%
    &:first-child
      left: -10%
.fa-shifted-stack .fa-shifted:last-child
  margin-left: -1.15rem
button, .button
  .fa-shifted-stack
    .fa-shifted:last-child
      margin-left: -0.85rem
  .fa-stack.fa-stack-sized
    width: auto
    height: auto
    line-height: 0 // For some reason this works on supplier dashboard for list
    vertical-align: -15%
    .fa-stack-small
      font-size: 0.5em
    .fa:last-child
      margin-left: -1.35rem
      vertical-align: -20%
      &.fa-stack-small
        margin-left: -1.35rem
        vertical-align: 30%
    .fa-stack-check:last-child
      @extend .fa
      @extend .fa-check
      color: #ffd600
      margin-left: -2rem
      vertical-align: 0
      text-shadow: 1px 4px 1px rgba(0, 0, 0, 0.45)