.options-list {
  display: flex;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--Options-Vertical-Padding-List, 8px) 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Options-Vertical-Gap, 0);
  border-radius: var(--Options-Radius-Box, 24px);
  border: var(--Options-Border, 1px) solid var(--Options-List-Border, #82909c);
  background: var(--Options-List-Background, #fff);

  & .option-container {
    width: 100%;
  }

  &::-webkit-scrollbar {
    width: var(--P08, 8px);
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-track {
    border-radius: var(--Scroll-Slider-Radius, 16px);
    background: var(--Scroll-Slider-Background-Back, #dfe2e5);
    margin-block: var(--P16, 1rem);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: var(--Scroll-Slider-Radius, 16px);
    border: 0.5px solid var(--Scroll-Slider-Border, rgb(255 255 255 / 80%));
    background: var(--Scroll-Slider-Background-Front, rgb(0 0 0 / 40%));
  }
}

/* STYLE WHEN INSIDE A SELECT */
.input-main-wrapper,
.phone-number-wrapper {
  .options-list {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    top: calc(
      var(--Input-Fields-Text-Field-Height, 48px) +
        var(--Input-Fields-Vertical-Gap, 4px)
    );
    z-index: var(--z-index-page-dropdown, 9);
    transition: opacity 0.3s ease-in-out;

    &.options-list-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}