.ds-dropdown-list {
  position: absolute;
  top: 100%;
  z-index: 1000;
  min-width: 100%;
  border: 1px solid var(--border-subtle-1);
  border-radius: var(--radius-050);
  background: var(--background-default);
  box-shadow: 0px 8px 18px -6px #18274b1f;
  max-height: 40vh;
  overflow-y: auto;

  &.right {
    right: 0px;
  }
}

.ds-dropdown-itemlist {
  display: flex;
  align-items: center;
  background: var(--background-default);
  padding: var(--spacing-0) var(--spacing-150);
  min-height: 40px;
  justify-content: left;
  white-space: nowrap;
  cursor: pointer;

  > .label {
    padding-right: var(--spacing-150);
    @include label-medium-1;
  }

  > .ds-icon {
    margin-right: 8px;
  }

  .sublabel {
    @include helper-small-1;
    margin-left: auto;
    text-transform: uppercase;
    padding-left: var(--spacing-150);
  }

  &.disabled {
    cursor: default;
    background: var(--layer-disabled);

    > span {
      color: var(--text-on-disabled);
    }
  }

  &:hover {
    background: var(--layer-hover-1);
  }
}
