.eventsWrapper {
   --backgroundColor: #f4f4f7;
   --accentColor: #6e5bfe;
   --validAccentColor: #3bc100;
   --validBackgroundColor: #effaeb;
   --invalidAccentColor: #ff7272;
   --invalidBackgroundColor: #ffeded;
   --textColor: #475569;
   --transparentColor: rgba(0, 0, 0, 0);
   color: var(--textColor);
   width: 300px;
   max-width: 100%;
   position: relative;
}

.eventsInput {
   width: 100%;
   background-color: var(--backgroundColor);
   border: none;
   font-weight: 600;
   padding: 0.4em 2em 0.4em 0.6em;
   border-radius: 10px;
   border: 2px solid transparent;
   transition:
      border-color 100ms ease-in-out,
      background-color 100ms ease-in-out,
      color 100ms ease-in-out;
}

.eventsInput:hover,
.eventsInput:focus,
.eventsInput[aria-expanded='true'] {
   outline: none;
   color: var(--textColor);
   background-color: var(--backgroundColor);
   border: 2px solid var(--accentColor);
}

.eventsDropdown {
   width: 100%;
   position: absolute;
   z-index: 999;
   animation: fadeIn 200ms ease-in-out;
   margin-top: 5px;
   margin-bottom: 5px;
   background-color: var(--backgroundColor);
   padding: 10px;
   border-radius: 10px;
}

.eventsSuggestion {
   font-size: 95%;
   overflow: hidden;
   user-select: none;
   padding: 0.4em 0.6em;
   border-radius: 6px;
   background-color: transparent;
   -webkit-tap-highlight-color: var(--transparentColor);
   transition:
      color 100ms ease-in-out,
      background-color 100ms ease-in-out;
}

.eventsSuggestion:hover,
.eventsSuggestion:focus,
.eventsSuggestion:focus-visible {
   outline: none;
}

.eventsSuggestion[data-active-email='true'] {
   outline: none;
   background-color: white;
   cursor: pointer;
   color: var(--accentColor);
}

.eventsDomain {
   font-weight: 600;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

/* Validity */

.validInput {
   border: 2px solid var(--validAccentColor);
   color: var(--validAccentColor);
   background-color: var(--validBackgroundColor);
}

.invalidInput {
   border: 2px solid var(--invalidAccentColor);
   color: var(--invalidAccentColor);
   background-color: var(--invalidBackgroundColor);
}

/* Icons */

.validIcon {
   position: absolute;
   right: 1em;
   height: 100%;
}

.eventsInput:hover ~ svg {
   display: none;
}