.member-select {
  @include component-border;
  &-title {
    @include component-title;
  }
  &.error {
    .select-input > div:first-of-type {
      border-color: var(--alert);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      animation-name: buzz-out;
      animation-duration: 0.75s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }
  }
}

@keyframes buzz-out {
  10% { transform: translateX(3px) rotate(2deg); }
  20% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  40% { transform: translateX(-3px) rotate(-2deg); }
  50% { transform: translateX(2px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  70% { transform: translateX(2px) rotate(1deg); }
  80% { transform: translateX(-2px) rotate(-1deg); }
  90% { transform: translateX(1px) rotate(0); }
  100% { transform: translateX(-1px) rotate(0); }
}
