/*
 * # SELECT2 STYLUS TEMPLATE
 * to define a theme:
 *  - set the 'theme' option in the js (theme: 'mytheme'), or
 *  - set the select markup property (data-theme="mytheme")
 *
 * themed select can be accessed throught
 * the '.select2-container--mytheme' class
 */

// include the global form variables
@require '../element/form.styl'

select-height          = input-height
select-highlight-color = color-light

.select2
  width 100% // use a container to set width if possible


/* -- common select widget style */

.select2-container
  .select2-selection
    {float}
    border input-border-width solid input-border-color
    border-radius input-border-radius
    color input-text-color input-bg-color
    &:focus
    &:active
      //{input-focus}
    &__rendered
      {input-padding}
      font-size input-font-size (select-height - 2 * input-border-width)px
    &__placeholder
      // placeholder style (see js/plugin/select.js to set placeholder)
      color inherit
      float left
    &__clear
      // clear select (allowClear)


/* -- single select widget style */

.select2-container
  .select2-selection--single
    height select-height
    .select2-selection
      &__rendered
        height (select-height - 2 * input-border-width)
        color inherit
        padding-left 10
      &__arrow
        height select-height
        //png 'picto/select' center
        .select2-container--open&
          // png 'picto/select-up'
        b
          display none


/* -- multiple select/search widget style */

// selected option/result block style
select-optblock-color         = silver
select-optblock-margin        = 2
select-optblock-border-width  = 0
select-optblock-border-color  = black
select-optblock-border-radius = 4

select-optblock-height = ((select-height) - (2 * input-border-width) - (2 * select-optblock-margin))

.select2-container
  .select2-selection--multiple
    display block
    cursor text
    min-height select-height
    user-select none
    .select2-selection
      &__rendered
        {inline-block}
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        list-style none
        padding-left border-width
        padding-bottom select-optblock-margin
      &__clear
        cursor pointer
        float right
        font-weight bold
        margin-top 5
        margin-right 10
      &__choice
        float left
        height select-optblock-height
        background-color select-optblock-color
        line-height select-height - 3 * input-border-width
        border select-optblock-border-width solid select-optblock-border-color
        border-radius select-optblock-border-radius
        cursor default
        margin input-border-width (input-border-width + 1) 0 0
        padding 0 7.5 0 5
        &__remove
          cursor pointer
          {inline-block}
          font-size (input-font-size * 1.5) 1
          margin-right select-optblock-margin + 1
          vertical-align middle
          &:hover
            color select-optblock-border-color


/* -- dropdown widget style */

.select2-container
  .select2-dropdown
    border 0
    border-radius 0
    box-shadow 0 3 3 rgba(#222, 0.3)
    .select2-results
      &__options
        max-height 400px !important
        width 100%
        border border-style
        border-top none
        overflow-x hidden
        background-color color-bg
      &__option
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        height select-option-height
        font-family input-font
        font-size input-font-size select-option-height
        color input-text-color input-bg-color
        padding 0
        padding-left 10
        &[aria-selected="true"]
          font-weight normal
          background-color select-highlight-color
          opacity 0.45
        &--highlighted
          background-color select-highlight-color
      &__group
        // optgroup style

/*

select-height-m = input-height-m


*/