@use "@cloud-editor-mono/ui-components/public/shared.module.scss";

$filterableListMaxHeight: 240;
$filterableListInput: 52;

.container {
  position: absolute;
  z-index: shared.$zIndex4;
  background-color: shared.theme-var(--dropdown-background);
  box-shadow: 0px 4px 20px rgb(0 0 0 / 25%);
  border-radius: 3px;
  width: 250px;
  pointer-events: auto;
}

.input {
  height: $filterableListInput * 1px;
  border: 1px shared.theme-var(--dropdown-divider);
  border-style: hidden hidden solid;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: shared.theme-var(--dropdown-background);
  color: shared.theme-var(--dropdown-item-label);

  &::placeholder {
    color: shared.theme-var(--input-field-label-placeholder);
  }
}

.list {
  list-style: none;
  padding: 0;
  margin-block-end: auto;
  margin-block-start: auto;
  overflow: auto;
  border-radius: 3px;
  max-height: calc((#{$filterableListMaxHeight} - #{$filterableListInput}) * 1px);

  &::-webkit-scrollbar-thumb {
    border: 4px solid shared.theme-var(--dropdown-background) !important;
  }

  &::-webkit-scrollbar-track {
    background-color: shared.theme-var(--dropdown-background) !important;
  }
}

.item {
  & span {
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
    grid-auto-flow: column;
    gap: 10px;
  }
}
