.mealz-select {
  display: block;
  width: 100%;
  position: relative;

  .mealz-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--mealz-ds-color-neutral-200, #d9dde1);
    background: var(--mealz-ds-color-neutral-white, #ffffff);
    font-size: 14px;
    cursor: pointer;
  }

  .mealz-select__button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .mealz-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 288px;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid var(--mealz-ds-color-neutral-200, #d9dde1);
    background: var(--mealz-ds-color-neutral-white, #ffffff);
    box-shadow: 0px 8px 16px rgba(15, 25, 31, 0.12);
    padding: 8px 0;
    z-index: 10;
  }

  .mealz-select__option {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--mealz-ds-color-neutral-black, #0f191f);
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    appearance: none;
  }

  .mealz-select__option:hover,
  .mealz-select__option[aria-pressed='true'] {
    color: var(--mealz-ds-color-primary, #24748f);
    background-color: var(--mealz-ds-color-primary-100, #e4eaec);
  }
}