import t, { css as r } from "styled-components";
import "../../_virtual/jsx-runtime.js";
import c from "../../icons/ChevronDown.js";
import { getDefaultTransition as l, convertToTransientProps as s, getColorAlias as e, getFontSize as n, getSpacing as i, getDarkenColor as d } from "../../utils/index.js";
const f = t.div.withConfig({
  shouldForwardProp: s(["isCollapsed"])
})`
  max-height: ${(o) => o.isCollapsed ? "0" : "min-content"};
  overflow: hidden;
  ${l()};
`, m = t(f)(
  (o) => r`
    color: ${e("contentSubdued")};
    width: 100%;
    white-space: pre-line;
    ${n("size16")};

    ${o.isCollapsed ? r`
          padding: ${i("s00", "s04")};
          visibility: hidden;
          opacity: 0;
        ` : r`
          padding: ${i("s02", "s04")};
          visibility: visible;
          opacity: 1;
        `}
  `
), p = t(c)`
  fill: ${e("contentDefault")};
  height: 18px;
  transform: rotate(-180deg);
  width: 18px;
  ${l("transform")};
`, b = t.button.withConfig({
  shouldForwardProp: s(["isCollapsed"])
})(
  (o) => r`
    background: ${e("containerDefault")};
    border: 2px solid transparent;
    cursor: pointer;
    margin: 0;
    padding: 12px ${i("s04")};
    ${l("background-color")};
    width: 100%;

    &:hover {
      background: ${d("hover01", "containerDefault")};
    }

    &:active {
      background: ${d("active01", "containerDefault")};
    }

    &:focus {
      border-color: ${e("focusOuter")};
    }

    &:disabled {
      background: ${e("containerDefault")};
      cursor: default;
    }

    ${o.isCollapsed && r`
      ${p} {
        transform: rotate(0);
      }
    `}
  `
);
function g(o) {
  switch (o) {
    case "default":
      return r`
        font-weight: ${(a) => a.theme.font.weightExtrabold};
        ${n("size20")};
      `;
    case "low-emphasis":
      return r`
        font-weight: ${(a) => a.theme.font.weightRegular};
        ${n("size16")};
      `;
  }
}
const v = t.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
`, x = t.span`
  align-items: center;
  color: ${e("contentDefault")};
  display: flex;
  flex-flow: row nowrap;
  ${(o) => g(o.variant)};

  span {
    display: flex;
    align-items: center;
  }

  svg {
    fill: ${e("contentDefault")};
    margin-right: ${i("s04")};
  }
`, y = t.div`
  align-items: center;
  color: ${e("contentSubdued")};
  display: flex;
  flex-flow: row nowrap;
  font-weight: ${(o) => o.theme.font.weightRegular};
  margin-top: ${i("s01")};
  ${n("size16")};
`, C = t.div.withConfig(
  {
    shouldForwardProp: s(["hasDivider"])
  }
)`
  background: ${e("containerDefault")};
  border-bottom: 1px solid;
  border-color: ${(o) => o.hasDivider ? e("dividerDefault") : "transparent"};
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
`;
export {
  p as AccordionChevron,
  m as AccordionContent,
  b as AccordionHeader,
  v as AccordionHeaderPrimaryRow,
  y as AccordionHeaderSecondaryRow,
  x as AccordionHeaderTitle,
  C as AccordionWrapper,
  f as CollapsableContainer
};
