.stack-selector-item
  md-item.che-list-item
    border none

  md-item-content
    display block
    border none

    .che-list-item-row
      line-height 25px

.stack-selector-item
  $stack-selected-background-color = #F2F7FD

  position relative
  background-color $che-white-color
  border 1px solid lighten($very-light-grey-color, 4%)
  border-top-color lighten($list-separator-color, 7%)
  z-index 0

  *
    outline none

  &:not(:first-of-type)
    margin-top -1px

  &:last-of-type
    border-radius 0 0 2px 2px

  .stack-selector-item-icon
    line-height 38px
    font-size 30px
    width 55px
    text-align center
    filter grayscale(100%) opacity(50%)

    img
      height 30px
      vertical-align top

    div
      width 50px

  .stack-selector-item-thumb-tack
    position: absolute
    top: 0
    left: 3px
    filter grayscale(100%) opacity(50%)

  .stack-selector-machines .stack-selector-machine-icon > div
    font-size 24px
    margin-left 120px
    margin-right 10px
    filter grayscale(100%) opacity(50%)

  .stack-selector-item-components > div
    display inline-block
    margin-right 10px
    padding 0 11px
    border 1px solid darken($che-white-color, 9%)
    border-radius 2px
    font-size 9px
    line-height 14px
    color $default-color

  // selected state
  &.stack-selector-item-selected
    background-color $stack-selected-background-color
    border-color $primary-color
    z-index 1 !important

    .stack-selector-item-name
      color $primary-color
