.c-SelectIcon {
  @import '../../resets/base';
  @import '../../configs/color';

  $arrowOffset: 2px;
  $arrowSize: 3px;
  $offset: 12px;

  align-self: center;
  color: _color(charcoal, 400);
  display: block;
  padding: 0 $offset;
  pointer-events: none;
  position: absolute;
  right: $offset;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  z-index: 1;

  &:before {
    border-bottom: ($arrowSize + 1) solid currentColor;
    border-left: $arrowSize solid transparent;
    border-right: $arrowSize solid transparent;
    bottom: 0;
    content: '';
    margin: $arrowOffset;
    position: absolute;
  }

  &:after {
    border-top: ($arrowSize + 1) solid currentColor;
    border-left: $arrowSize solid transparent;
    border-right: $arrowSize solid transparent;
    content: '';
    margin: $arrowOffset;
    position: absolute;
    top: 0;
  }

  &.is-error {
    margin-right: 28px;
  }
}