import o, { css as n } from "styled-components";
import { getSpacing as t, getColorAlias as i, getDarkenColor as p, convertToTransientProps as a, getFontSize as l } from "../../utils/index.js";
const r = o.li.withConfig(
  {
    shouldForwardProp: a([
      "prefixWidth",
      "dividerStartsFromText",
      "divider"
    ])
  }
)`
  cursor: ${(e) => e.disabled ? "not-allowed" : e.onClick ? "pointer" : "default"};
  display: flex;
  position: relative;
  width: 100%;
  min-height: ${t("s08")};
  padding: ${t("s02")};
  background-color: ${i("containerDefault")};
  color: ${(e) => e.state === "unavailable" || e.disabled ? i("contentDisabled") : i("contentDefault")};
  list-style-type: none;

  span {
    color: ${(e) => e.disabled && i("contentDisabled")};
  }

  ${(e) => e.state === "default" && n`
      &:hover {
        background-color: ${p("hover01", "containerDefault")};
      }
    `}
  svg {
    fill: ${(e) => e.state === "unavailable" || e.disabled ? i("contentDisabled") : i("contentDefault")};
  }

  ${({ divider: e, theme: d, prefixWidth: c, dividerStartsFromText: f }) => e && n`
      &::before {
        content: '';
        ${f ? n`
              width: calc(100% - ${c}px - ${t("s04")});
            ` : n`
              width: 100%;
            `};
        height: 1px;
        background-color: ${i("borderDefault", d)};
        position: absolute;
        right: 0;
        bottom: 0;
      }
    `}
`, b = o(r)`
  min-height: ${t("s07")};
`, u = o(r)`
  min-height: ${t("s09")};
`, x = o.div`
  display: flex;
  flex-flow: row nowrap;
  align-items: ${({ variant: e }) => e === "multi-line" ? "flex-start" : "center"};
  flex: 1;
`;
o.div.withConfig({
  shouldForwardProp: a(["type"])
})`
  height: 100%;
  padding-inline: ${t("s02")};
  display: flex;
  align-items: ${(e) => e.type === "action" ? "baseline" : "center"};
  justify-content: center;

  div {
    margin: 0;
  }

  svg {
    ${l("size20")};
    fill: ${i("interactivePrimary")};
  }

  img {
    ${(e) => e.type === "thumbnail" ? n`
            height: ${t("s09")};
            width: ${t("s09")};
          ` : n`
            height: ${t("s07")};
            width: ${t("s07")};
          `}
    object-fit: cover;
    ${(e) => e.type === "avatar" && n`
        clip-path: circle();
      `}
  }
`;
o.div`
  padding-inline: ${t("s02")};
  flex: 1 2 60%;
  flex-direction: column;
`;
const $ = o.p`
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
`, g = o($)`
  ${l("size14")};
  color: ${i("contentSubdued")};
  -webkit-line-clamp: 2;
`, s = n`
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;
o(g)`
  ${l("size14")};
  ${s}
  align-self: baseline;
`;
o.div`
  ${s}
  flex-basis: 25%;
  svg {
    ${l("size24")};
    fill: ${i("interactivePrimary")};
  }
`;
export {
  b as CompactListItemWrapper,
  r as DefaultListItemWrapper,
  x as ListItemFlexContainer,
  $ as ListItemPrimaryText,
  g as ListItemSecondaryText,
  u as MultiLineListItemWrapper
};
