.container {
  display: flex;
  cursor: pointer;
  background: var(--crt-com-color-background-dropdown-menu-item-default);
  height: var(--crt-com-dimension-height-dropdown-menu-item);
  fill: var(--crt-com-color-background-dropdown-menu-item-default);
  box-sizing: border-box;
  list-style-type: none;
  &:hover {
    background-color: var(--crt-com-color-background-dropdown-menu-item-hover);
    cursor: pointer;
  }
  &:active {
    background: var(--crt-com-color-background-dropdown-menu-item-active);
  }
  &__current {
    background: var(--crt-com-color-background-dropdown-menu-item-active);
  }
  svg {
    fill: var(--crt-com-color-icon-checkbox-unselected-default);
  }

  &.selected.single {
    background: var(--crt-com-color-background-dropdown-menu-item-selected);
  }
  &.selected {
    background-color: var(
      --crt-com-color-background-dropdown-menu-item-multi-selected
    );
    svg {
      fill: var(--crt-com-color-icon-checkbox-selected-default);
    }
  }

  &__disabled {
    cursor: none;
    pointer-events: none;
    background: var(--crt-com-color-background-dropdown-menu-item-disabled);
    .menuItem {
      color: var(--crt-com-color-text-dropdown-menu-item-disabled);
    }
    svg {
      fill: var(--crt-com-color-text-dropdown-menu-item-disabled);
    }
  }
}

.menuItem {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: var(--crt-com-color-text-dropdown-menu-item-default);
  gap: var(--crt-com-dimension-gap-dropdown-menu-item);
  padding: var(--crt-com-dimension-padding-dropdown-menu-item);

  font-family: var(
    --crt-com-typography-component-dropdown-menu-item-label-font-family
  );
  font-size: var(
    --crt-com-typography-component-dropdown-menu-item-label-font-size
  );

  font-weight: var(
    --crt-com-typography-component-dropdown-menu-item-label-font-weight
  );
  letter-spacing: var(
    --crt-com-typography-component-dropdown-menu-item-label-letter-spacing
  );
  line-height: var(
    --crt-com-typography-component-dropdown-menu-item-label-line-height
  );

  input {
    &[type='radio'],
    &[type='checkbox'] {
      position: absolute;
      left: 0;
      visibility: hidden;
    }
  }
  p {
    margin: 0;
    width: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
