// NEED TO WORK THIS TO NOT WORK WITH SELECT?

.combobox_native, .combobox
  display: inline-block
  margin-bottom: $baseLineSpacing

.combobox
  position: relative
  
  a,a:visited

    border: 2px solid #CCC
    font-size: $baseFontSize + 1px
    -webkit-appearance: none
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-touch-callout: none
    -webkit-border: none
    -webkit-margin: none
    outline: none
    @include box-shadow( none ) 
    @include box-mode
    @include border-radius(0px)
    display: inline-block
    cursor: pointer
    position: relative

    min-width: 88px

    background: #FFFFFF
    color: #333

    height: $baseFingerSize*1
    font-size: $baseFontSize - 1px
    padding: ($baseLineHeight * 1)
    @include transition-property(background)
    @include transition-duration(0.10s)
    white-space: nowrap

    text-decoration: none

    &.selected
      background: #ececec

  > a,:visited
    padding-right: $baseLineHeight - 2px + 30px
    background: #FFFFFF image-url("mobile-dropdown-arrow.png") no-repeat right  14px

  ul
    display: none
    position: absolute
    background: #F00
    z-index: 1000
    left: 0px
    top: $baseFingerSize
    margin: 0px
    padding: 0px
    
    a
      margin-bottom: 0px
      display: block
      width: 100%
      text-align: left
  &.open
    > a
      border-bottom: none
      @include box-shadow( 3px 3px 0px rgba(0,0,0,0.10))
    ul
      display: block
      @include box-shadow( 3px 3px 0px rgba(0,0,0,0.10))

      a:not(:last-child)
        border-bottom: none

.mobile
  .combobox_native
    display: inline-block
    border: 2px solid #CCC
    padding-left: $baseLineHeight - 2px
    padding-right: $baseLineHeight - 2px + 30px
    height: $baseFingerSize
    font-size: $baseFontSize + 1px
    background: #FFFFFF image-url("mobile-dropdown-arrow.png") no-repeat center right 

    @include border-radius(0px)

    white-space: nowrap
    -webkit-appearance: none
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-touch-callout: none
    -webkit-border: none
    -webkit-margin: none
    vertical-align: top
    @include box-shadow( none ) 
    @include box-mode
    overflow: hidden
    display: inline-block
    outline: none

    cursor: pointer