import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export const style = {
  Description: {
    "& .icon": {
      color: "var(--sqm-text)",
      "&:hover": {
        color: "var(--sqm-accent-color-icon)",
      },
    },
    "& input[type=checkbox]": {
      display: "none",
    },
    "& input:checked ~ .details": {
      transform: "rotate(-180deg)",
    },
    "& .details": {
      position: "absolute",
      top: "var(--sl-spacing-medium)",
      right: "var(--sl-spacing-medium)",
      color: "var(--sqm-text)",
      fontSize: "var(--sl-font-size-large)",
      "& :hover": {
        color: "var(--sl-color-primary-700)",
      },
      transformOrigin: "50% 37%",
      transition: "transform var(--sl-transition-medium) ease",
      cursor: "pointer",
    },
    "& input:checked ~ .summary": {
      transition: "all var(--sl-transition-medium) ease",
      maxHeight: "300px",
      marginBottom: "var(--sl-spacing-x-large)",
    },
    "& input:checked ~ .summary[progress-bar]": {
      marginBottom: "var(--sl-spacing-xx-large)",
    },
    "& .summary": {
      display: "block",
      overflow: "hidden",
      fontSize: "var(--sl-font-size-small)",
      maxHeight: "0px",
      transition: "all var(--sl-transition-fast) ease-out",
      marginBottom: "var(--sl-spacing-medium)",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function Details(props) {
  const rid = Math.random().toString(36).slice(2);
  return (h("div", { style: { opacity: props.opacity } },
    h("style", { type: "text/css" }, styleString),
    h("span", { class: sheet.classes.Description },
      h("input", { type: "checkbox", id: "details-" + rid }),
      h("label", { class: "details", htmlFor: "details-" + rid },
        h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
      h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
}
