$dropdown-border-width: 1px;

$dropdown-indent: 13px;
$dropdown-height: 40px;
$dropdown-icon-size: 20px;

$dropdown-indent--large: 20px;
$dropdown-height--large: 48px;
$dropdown-icon-size--large: 24px;

$dropdown-indent--condensed: 13px;
$dropdown-height--condensed: 30px;
$dropdown-icon-size--condensed: 16px;

.dropdown-2 {
  @include make-link($color-gray--darker,$color-blue)
  display: block;
  border: $dropdown-border-width solid $color-gray--light;
  background: $color-gray--lighter;
  overflow: hidden;
  width: 100%;

  /* important clear floats to get the HTML-Flow back in sync */
  @include clearfix();
}

.dropdown-2__label {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.dropdown-2__select {
  @include make-link($color-gray--darker,$color-blue)
  display: block;
  -webkit-appearance: none;
  appearance: none;
  /* overflow is indented to fix browser who don't support hiding the native arrow */
  width: 120%;
  /* important: fake it to have 0 width */
  float: left;
  margin-right: -120%;
  /* don't use background nor border - the parent deals with that */
  background: transparent;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  line-height: $dropdown-height; /* not ideal, firefox is buggy here - see fix at the bottom */
  height: $dropdown-height;
  text-indent: $dropdown-indent;	/* not ideal, firefox is buggy here - see fix at the bottom */

  /* disable outline styles */
  &:active,
  &:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none;
  }

  &:focus {
    color: $color-blue;

    + .dropdown-2__icon-right {
      color: $color-blue;
    }
  }

  /* fix firefox focus stuff */
  &::-moz-focus-inner,
  & option::-moz-focus-inner {
    box-shadow: none !important;
    outline: none !important;
    border: none;
  }

  /* fix ugly blue screen at focused option value in IE */
  &:focus::-ms-value {
    background: transparent;
    color: inherit;
  }

  /* fix native select arrows on IE */
  &::-ms-expand {
    display: none;
  }

  @include target(ie) {
    /* fix IE not adhering to `text-indent` rules at <select> tags */
    padding-left: $dropdown-indent;
  }

  @include target(moz) {
    /* fix firefox dotted border on focused selects */
    &:focus {
      color: transparent;
      text-shadow: 0 0 0 $color-blue;
    }

    /* Fix Firefox doubles text-indent value */
    text-indent: $dropdown-indent/2;
  }
}

.dropdown-2__select--large {
  @extend .make-font-large;
  line-height: $dropdown-height--large; /* not ideal, firefox is buggy here - see fix at the bottom */
  height: $dropdown-height--large;
  text-indent: $dropdown-indent--large;	/* not ideal, firefox is buggy here - see fix at the bottom */

  @include target(ie) {
    /* fix IE not adhering to `text-indent` rules at <select> tags */
    padding-left: $dropdown-indent--large;
  }

  @include target(moz) {
    /* Fix Firefox doubles text-indent value */
    text-indent: $dropdown-indent--large/2;
  }
}

.dropdown-2__select--condensed {
  font-size: $font-medium--size;
  line-height: $dropdown-height--condensed; /* not ideal, firefox is buggy here - see fix at the bottom */
  height: $dropdown-height--condensed;
  text-indent: $dropdown-indent--condensed;	/* not ideal, firefox is buggy here - see fix at the bottom */

  @include target(ie) {
    /* fix IE not adhering to `text-indent` rules at <select> tags */
    padding-left: $dropdown-indent--condensed;
  }

  @include target(moz) {
    /* Fix Firefox doubles text-indent value */
    text-indent: $dropdown-indent--condensed/2;
  }
}

/* allign the icon correctly without position: absolute */
.dropdown-2__icon-right {
  display: block;
  float: right;
  height: $dropdown-height;
  margin-left: -100%;
  padding: 0 $dropdown-indent;
  pointer-events: none;
  background: $color-gray--lighter;
}

.dropdown-2__icon-right--large {
  height: $dropdown-height--large;
  padding: 0 $dropdown-indent--large;
}

.dropdown-2__icon-right--condensed {
  height: $dropdown-height--condensed;
  padding: 0 $dropdown-indent--condensed;
}

.dropdown-2__icon {
  display: block;
  position: relative;
  top: 50%;
  margin-top: -$dropdown-icon-size/2;
  width: $dropdown-icon-size;
  height: $dropdown-icon-size;
}

.dropdown-2__icon--large {
  width: $dropdown-icon-size--large;
  height: $dropdown-icon-size--large;
  margin-top: -$dropdown-icon-size--large/2;
}

.dropdown-2__icon--condensed {
  width: $dropdown-icon-size--condensed;
  height: $dropdown-icon-size--condensed;
  margin-top: -$dropdown-icon-size--condensed/2;
}