Select: required

.select {
  display: inline-block;
  max-width: 30rem;
  padding: 0 1.4rem;
  position: relative;

  &::after,
  &::before {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    width: 1.4rem;
  }

  &::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 52"><defs/><path fill="' + $color-blue + '" d="M14.14 0a10 10 0 0 0-7.07 2.93L2.93 7.07A10 10 0 0 0 0 14.14v23.72a10 10 0 0 0 2.93 7.07l4.14 4.14A10 10 0 0 0 14.14 52H24V0h-9.86zM23 51h-8.86A9 9 0 0 1 8 48.58l-.22-.22-4.14-4.14A9 9 0 0 1 1 38.17V14.14A9 9 0 0 1 3.42 8l.22-.22 4.14-4.14A9 9 0 0 1 13.83 1l.31-.01H23v50z"/></svg>');
    left: 0;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 52"><defs/><path fill="' + $color-blue + '" d="M-.14 0a10 10 0 0 1 7.07 2.93l4.14 4.14A10 10 0 0 1 14 14.14v23.72a10 10 0 0 1-2.93 7.07l-4.14 4.14A10 10 0 0 1-.14 52H-10V0h9.86zM-9 51h8.86A9 9 0 0 0 6 48.58l.22-.22 4.14-4.14A9 9 0 0 0 13 38.17l.01-.31V14.14A9 9 0 0 0 10.58 8l-.22-.22-4.14-4.14A9 9 0 0 0 .17 1H-9v50z"/></svg>');
    right: 0;
  }
}

.select__select {
  appearance: none;
  background-color: $form-input-background;
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><defs/><path fill="' + $color-blue + '" d="M14 0l1.77 1.77L9.6 7.92l-3.1.12L.23 1.77 2 0l5.5 5.5 1.03-.04z"/></svg>');
  background-position: right 0.8rem center;
  background-repeat: no-repeat;
  background-size: 1.6rem 0.9rem;
  border-bottom: 1px solid $color-blue;
  border-radius: $form-border-radius;
  border-top: 1px solid $color-blue;
  box-sizing: border-box;
  color: $form-input-color;
  display: block;
  font-family: $font-family-secondary;
  font-size: $form-input-font-size;
  font-weight: $font-weight-bold;
  height: $form-input-height;
  line-height: calc(2 / 1.5);
  outline: none;
  padding: 1.04rem 3rem 1.04rem 1.04rem;
  position: relative;
  width: 100%;
  z-index: 1;

  &:focus {
    background-color: $form-input-focus-background;
    border-bottom: 1px solid $color-blue;
    border-top: 1px solid $color-blue;
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 $color-dark;
  }

  option:not(:checked) {
    color: $color-dark;
  }

  &::placeholder {
    color: $form-placeholder-color;
  }

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

  &[disabled] {
    cursor: not-allowed;
  }
}

.bg-white .select__select,
.bg-white .select__select:focus,
.section--white .select__select,
.section--white .select__select:focus {
  background-color: #fff;
}

.select,
.select__select {
  @include mq($until: m) {
    width: 100%;
  }
}