@import '../../styles/variables';
@import '../../styles/mixins';

.Select {
  position: relative;

  &__field {
    @include input;
    padding-right: 20px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGBAMAAADnHHnLAAAAJFBMVEUAAAB6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enooCV5CAAAADHRSTlMA40c0qFA9LCgiwZNN/aJRAAAALUlEQVQI12NwY2BgYHNgMFRgYFA0YGAWYmASBooUBgQWACkOaQkGEJg1gYEBAE4tBECvACBpAAAAAElFTkSuQmCC') no-repeat center right 5px;
    border: 1px solid $gray70;
    -moz-appearance: none;
    -webkit-appearance: none;

    &::-ms-expand {
      display: none;
    }

    &_danger {
      border-color: $error-color;
      background-position: center right 35px;
    }
  }

  &__helpers {
    position: absolute;
    right: 1px;
    top: 1px;
    display: flex;
    flex-direction: row;
    line-height: 32px;
    height: 30px;
    align-items: center;
  }
}