@import "base/variavles"
@import "base/colors"
@import "common/parts"

.select-box-container
  display: block
  li, ul
    margin: 0
    padding: 0

.select-box-header
  white-space: nowrap
  word-wrap: break-word
  .header
    @extend %header

.select-box-bottom
  clear: both

.select-box-results, .select-box-options
  position: absolute
  z-index: 99999
  opacity: 0.95

.box-wrapper
  display: block
  max-height: 200px
  overflow-y: auto
  border: 1px solid #{map_get($component_colors, border)}
  background-color: #F2F2F2
  box-shadow: 12px 12px 10px -6px rgba(0, 0, 0, 0.2)

.select-box-results
  input[type=checkbox]
    margin: 0 5px 0 5px
  .header
    font-size: 8pt
    color: #757575
    pointer-events: none
  margin: 0
  padding: 0

.select-box-options ul
  border-right: 1px solid #{map_get($component_colors, border)}

.select-box-results
  ul:last-child
    border-bottom: none
  li
    padding: 2px 10px
    border-bottom: 1px solid #{map_get($component_colors, border)}
    list-style: none
    font-size: 9pt
    color: #494546

.select-box-options li
  padding: 2px 10px
  border-bottom: 1px solid #{map_get($component_colors, border)}
  list-style: none
  font-size: 9pt
  color: #494546

.select-box-results label, .select-box-options label, .select-box-results li, .select-box-options li
  cursor: pointer
  display: inline-block
  font-weight: normal
  width: 100%

.select-box-results li:hover, .select-box-options li:hover
  background-color: #dcdcdc
  border-left: 2px solid #{map_get($component_colors, select)}
  color: #0e0e0e

.select-box-search
  position: relative

input.select-box-search
  height: 51px
  width: 100%
  border: 1px solid #{map_get($component_colors, border)}
  outline: none
  padding: 5px 40px 5px 20px
  background:
    image: url("#{$static}/img/zoom.svg")
    repeat: no-repeat
    position-x: right
    position-y: center
    size: 40px 40px
    color: white
  margin-bottom: -1px
  &.active
    border: 1px solid #{map_get($component_colors, select)}
  &:-webkit-autofill
    transition: background-color 5000s ease-in-out 0s
    &:hover, &:focus
      transition: background-color 5000s ease-in-out 0s

.select-box-results
  .main-part
    display: block
    border-right: 1px solid #{map_get($component_colors, border)}
  .other-part
    border-right: 1px solid #{map_get($component_colors, border)}
    border-top: 1px solid #000000
    color: darkgray
  .other-header
    color: #000
    font-weight: bold
    margin-left: 10px

/*???

.select-box-options .box-wrapper, .select-box-results
  min-width: 300px
  max-width: 400px

button.button-add
  box-shadow: none
  border: none

.button-add
  position: absolute
  bottom: -30px
  right: 0
  z-index: 999
  font:
    family: Myriad
    weight: normal
    style: normal
    size: 10pt
  -moz-border-radius: 15px
  /* Firefox
  -webkit-border-radius: 15px
  /* Safari 4
  border-radius: 15px
  /* IE 9, Safari 5, Chrome
  background-color: #{map_get($component_colors, select)}
  padding: 4px 15px 2px 15px
  text-decoration: none
  color: white
  &.results
    position: relative
    float: right
    bottom: 0

.highlight
  color: #{map_get($component_colors, select)}

#component-preloader
  position: absolute
  left: 0
  top: 0
  right: 0
  bottom: 0
  background: #9fa4a4
  opacity: 0.2
  z-index: 100500
  .spinner
    width: 32px
    height: 32px
    position: absolute
    left: 50%
    top: 50%
    background: url('#{$static}/img/ajax-loader.gif') no-repeat 50% 50%
    margin: -16px 0 0 -16px