$che-selecter-color = $label-info-color

.che-selecter
  height 150px
  width 150px
  border-color $form-element-border-color
  background-color $background-color
  border-width 2px
  border-style solid
  che-border-radius(2px)
  -webkit-box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  padding-top 12px
  margin-left 16px
  margin-right 16px
  color $che-selecter-color

  &:hover
    background-color $che-selecter-color
    color $background-color

.che-selecter .title
  padding-top 4px
  padding-bottom 3px

.che-selecter .body
  height 50px
  margin-bottom 8px

.che-selecter select
  display block
  box-shadow none
  width 118px
  height 20px
  padding-left 3px
  padding-right 22px
  font-size 12px
  -webkit-appearance none
  -moz-appearance none
  -ms-appearance none
  appearance none

.che-selecter md-icon
  font-size 60px
  text-align center
  margin-left auto
  margin-right auto
  margin-top 0px
  margin-bottom 0px
  padding 0px
  height 74px
  width 74px

.che-selecter .title
  font-size 12px
  text-align center
  text-transform uppercase

.che-selecter select
  margin-left 16px
  margin-right 16px
  display none

.che-selecter-active
  border-color $primary-color
  color $primary-color

  &:hover
    background-color $background-color


.che-selecter-active .body
  background-color $primary-color

.che-selecter-active .title
  background-color $primary-color
  color $background-color

.che-selecter-active select
  display block !important
  color $primary-color
  background-color $background-color

.che-selecter-active select:hover
  background-color #fafafa
  border-style solid
  border-width 1px
  text-align left
  color $primary-color


.che-selecter-active:hover .body
  background-color $primary-color !important
  color $background-color

.che-selecter-active:hover md-icon
  color $primary-color

.che-selecter:hover select
  display block !important



.che-selecter:active .body
  display block

che-selecter-icon()
  content '\25BC'
  margin-left -35px
  margin-top 2px
  pointer-events none
  -webkit-transform scaleY(0.6) scaleX(1)
  -ms-transform scaleY(0.6) scaleX(1)
  transform scaleY(0.6) scaleX(1)
  z-index 9

.che-selecter:hover .selecter:after
  color $che-selecter-color
  che-selecter-icon()

.che-selecter-active .selecter:after
  che-selecter-icon()

che-selecter md-card:focus
  outline none

che-selecter
  outline none
