@use '../../assets/styles/variables' as *;
@use '../../assets/styles/utils' as *;

@mixin arrow($isLight: false) {
  $color: if($isLight == true, '2b2b2e', 'fff');
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4.977 10.125.852l1.178 1.178L6 7.333.697 2.03 1.875.852 6 4.977Z' fill='%23#{$color}' fill-opacity='.7'/%3E%3C/svg%3E");
}

.resets {
  appearance: none;
  font: inherit;
  outline: none;
  cursor: pointer;
}

.select {
  @extend .resets;
  @extend %wrapper;
  @extend %inputWrapper;
  @extend %input;
  width: 100%;
  padding-right: 40px !important; // overriding %inputWrapper

  background-position: center right 16px;
  background-repeat: no-repeat;

  &.dark {
    @include arrow();
  }

  &.light {
    @include arrow(true);
  }

  &:not(.block) {
    max-width: $inputWidth;
  }
}