import n, { css as o } from "styled-components";
import { getFieldPadding as s } from "../utils.js";
import { getColorAlias as t, getFontSize as r, getDefaultTransition as d, getSpacing as i, convertToTransientProps as a, getDarkenColor as l } from "../../../utils/index.js";
import { fadeIn as u } from "../../../utils/styles.js";
import { Prefix as f } from "../textField/styles.js";
const g = n.div.withConfig({
  shouldForwardProp: a(["hasText"])
})`
  display: flex;
  flex-direction: row;
  justify-content: ${(e) => e.hasText ? "space-between" : "flex-end"};
  width: 100%;
  color: ${(e) => t(e.disabled ? "contentDisabled" : "contentDefault")};
  background: ${(e) => e.disabled ? t("disabled01") : "transparent"};
  ${r("size16")};
  ${(e) => s(e.variant)};
  border: unset;
  outline: unset;
  border-radius: ${(e) => e.theme.radius.roundedC};
  width: 100%;
  ${d("background")};
  align-items: center;

  &:hover {
    cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
  }

  &:focus:hover {
    background: ${(e) => e.disabled ? t("disabled01") : t("containerDefault")};
  }

  input {
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  span {
    cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
    flex-wrap: wrap;
    gap: ${i("s01")};
  }

  > svg {
    fill: ${(e) => e.disabled ? t("disabled01") : t("contentDefault")};
  }
`, b = n.div.withConfig({
  shouldForwardProp: a(["maxHeight"])
})`
  max-height: ${(e) => `${e.maxHeight}px`};
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  background: ${t("containerDefault")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  border-radius: ${(e) => e.theme.radius.roundedC};
  padding: ${i("s02", "s00")};
  width: ${(e) => `${e.width}px`};
  box-shadow: ${(e) => e.theme.elevation.e3};
  ${(e) => o`
      animation: ${u} ${e.theme.motion.speed.defaultM}
        ${e.theme.motion.easing.easeDefault};
    `};

  &:active,
  &:focus,
  &:enabled {
    outline: none;
  }
`, w = n.div`
  ${(e) => e.isMultivalue && o`
      margin-left: ${i("s04")};
    `};
`, x = n.span.withConfig({
  shouldForwardProp: a([
    "isSelected",
    "isMultivalue"
  ])
})`
  display: flex;
  ${(e) => e.isMultivalue ? o`
          align-items: center;
          justify-content: flex-start;
        ` : o`
          align-items: center;
          justify-content: space-between;
        `};

  padding: ${i("s03", "s04")};
  color: ${(e) => e.isDisabled ? t("contentDisabled") : t("contentDefault")};
  font-weight: ${(e) => e.isSelected ? e.theme.font.weightExtrabold : e.theme.font.weightRegular};
  font-family: ${(e) => e.theme.font.familyPrimary};
  outline: none;
  border: 2px solid transparent;
  border-radius: ${(e) => e.theme.radius.roundedA};
  cursor: pointer;
  ${r("size16")};
  ${d()};

  background: ${(e) => t(e.isHovered ? "disabled01" : "containerDefault")};

  &:hover {
    background: ${l("hover02", "containerDefault")};
  }

  &:focus-visible {
    border-color: ${t("focusOuter")};
  }
`, v = n(f)`
  ${(e) => e.hasValue ? o`
          padding-left: ${i("s04")};
        ` : o`
          padding: ${i("s00", "s04")};
        `};
`;
export {
  v as DropdownPrefix,
  x as OptionItem,
  w as OptionItemLabel,
  b as OptionsPopper,
  g as SelectInput
};
