// Variables
// ========================================================================

@select-color:                                    @global-color;
@select-dark-color:                               @global-dark-color;
@select-dark-background:                          @global-dark-background;
@select-border:                                   @input-border;
@select-dark-border:                              fade(@input-dark-border, 80%);
@select-padding:                                  4px 24px 4px 8px;

/* ========================================================================
   Component: Select
 ========================================================================== */

.uk-select {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  font: inherit;
  vertical-align: middle;

  background: none;
  outline: none;
  border: 0;

  color: @select-color;
  
  .dark & {
    color: @select-dark-color;

    > option, > optgroup {
      background-color: @select-dark-background;
    }
  }

  /*
   * Address inconsistent `text-transform` inheritance which is only inherit in Firefox
   * Address inconsistent styling between firefox and chrome
   */
  text-transform: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.uk-select:not([multiple]) {
  background: data-uri('image/svg+xml;charset=UTF-8', "../fonts/svg/form-select-icon.svg") no-repeat 100% 50%;
  padding: @select-padding;

  border-bottom: solid 1px @select-border;

  .dark & {
    border-color: @select-dark-border;
    background: data-uri('image/svg+xml;charset=UTF-8', "../fonts/svg/form-select-icon-dark.svg") no-repeat 100% 50%;
  }
}

.uk-select[multiple] {
  > option, > optgroup {
    padding: @select-padding;
  }
}