.select {
  .appearance(none);

  flex: 1 0 38px;
  padding-right: 25px;
  text-overflow: ellipsis;
  text-transform: none;
  font-weight: 600;
  font-size: @text-size-2;
  padding-left: 16px;
  text-align: left;
}

.select__option {
  background: #fff;
  color: #000;
}

.select__option[disabled] {
  color: @text-color;
}

.select--small {
  padding-left: 7px;
  padding-right: 20px;
  flex-basis: @input-height-small;
  font-size: @text-size-1;
  line-height: 23px;
}

.select__wrapper {
  position: relative;
  display: inline-block;
}

.select__icon {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.select--with-icon {
  padding-left: 28px;
}

@error-gradient: #c14c45;

.select-background (@background: #2b2b2b, @size: normal) {
  .inception (@arguments) when (@size = normal) {
    @image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 7"><path fill="#000" fill-opacity="0.2" d="M10,1,5,7,0,1"/><path fill="#828282" d="M10,0,5,6,0,0"/></svg>';
    @url_encoded: escape(@image);

    background-image: url('data:image/svg+xml;utf8,@{url_encoded}');
    background-size: 20px 7px;
  }

  .inception (@arguments) when not (@size = normal) {
    @image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 7"><path fill="#000" fill-opacity="0.2" d="M10,1,5,7,0,1"/><path fill="#828282" d="M10,0,5,6,0,0"/></svg>';
    @url_encoded: escape(@image);

    background-image: url('data:image/svg+xml;utf8,@{url_encoded}');
    background-size: 15px 4px;
  }

  .inception(@arguments);

  background-color: @background;
  background-repeat: no-repeat;
  background-position: right center;
}

.select,
.select[disabled] {
  &:extend(.btn all);
  .select-background(var(--select-background));

  color: var(--select-color);
  border: 1px solid var(--select-border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.select--error {
  .select-background(var(--select-background));
}

.select--small.select--error {
  .select-background(var(--select-background), small);
}

.select--small,
.select--small[disabled] {
  &:extend(.btn--small);
  &:extend(.input--small);
  .select-background(var(--select-background), small);
}

.select--light,
.select--light[disabled] {
  .select-background(#fff, #fff);

  color: #777;
  border: 1px solid #b1b1b1;
}

.select--light:focus {
  box-shadow:
    inset 0 1px 0 #fff,
    @focus-box-shadow;
}

.select--light.select--small,
.select--light.select--small[disabled] {
  .select-background(#fff, small);
}