:root {
  --menu-max-height: 250px;
  --wrapper-z-index: 3;
  --wrapper-margin: 8px;
  --input-box-shadow-invalid: 0 0 0 2px var(--color-red-600);
  --caretIcon-right: 4px;
  --caretIcon-top: 12px;
  --rrs__options-top: 50px;
  --rrs__button-line-height: 44px;
}

.rrs {
  position: relative;
  margin: var(--wrapper-margin) 0;
}

.rrs__button {
  color: var(--color-neutral-800);
  font-weight: var(--font-weight-bold);
  position: relative;
  cursor: pointer;
  line-height: var(--rrs__button-line-height);
  background: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-neutral-300);
  &:hover {
    background-color: var(--color-neutral-200);
  }
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-brand-700);
  }
}

.rrs__button--disabled {
  background-color: var(--color-neutral-300);
  color: var(--color-neutral-700);
  cursor: initial;
  &:hover {
    background-color: var(--color-neutral-300);
  }
}

.rrs__button + .rrs__options {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-white);
  position: absolute;
  z-index: 2;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  top: var(--rrs__options-top);
  width: 100%;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.rrs--options-visible .rrs__options {
  height: auto;
  visibility: visible;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: var(--space-6x);
  max-height: var(--menu-max-height);
}

.rrs__option {
  cursor: pointer;
  padding: 0.75rem 1rem;
  margin: 0;
  * {
    pointer-events: none;
  }
  &:focus {
    outline: 0;
  }
  &:hover {
    background: #e2f1f9;
  }
  &:active {
    background: #e1f5fe;
  }
  &.rrs__option--selected {
    color: var(--color-brand-700);
  }
}

.rrs__label {
  padding: 0 2rem 0 1rem;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: inherit;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0);
}

.rrs__label__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.rrs--options-visible .rrs__label,
.rrs__button:focus .rrs__label {
  outline: 0;
}

.CustomSelect {
  width: 100%;
  min-width: 100%;
  margin: var(--wrapper-margin) 0;
  z-index: var(--wrapper-z-index);

  && .InputFeedback--note {
      color: var(--color-neutral-700);
      font-size: var(--font-size-tiny);
      font-style: normal;
  }
}

.CustomSelect--invalid {
  & .rrs__button {
    outline: 0;
    box-shadow:var(--input-box-shadow-invalid);
  }
}

.rrs-caretIcon {
  position: absolute;
  right: var(--caretIcon-right);
  top: var(--caretIcon-top);
}