.button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.searchBarContainer {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  // This is to make sure the white space above the SearchBar is covered so that the options under the SearchBar are not visible when those elements scroll above the SearchBar.
  &::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
    background-color: var(--white);
  }
  .gradient {
    height: 16px;
    background-color: var(--white);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgb(255, 255, 255) 100%
    );
    z-index: 1; // Needs to be in front of the options
    position: sticky;
  }
}

.drawerContainer {
  display: flex;
  flex-direction: column;
}