/* card.st.css  */
@namespace "Card";

:import {
  -st-from: "../../common/project.st.css";
  -st-default: Project;
  -st-named:
    laptop;
}

:import {
  -st-from: "../../components/Button/button.st.css";
  -st-default: Button;
}

:import {
  -st-from: "../../components/Image/image.st.css";
  -st-default: Image;
}

:import {
  -st-from: "../../components/Link/link.st.css";
  -st-default: Link;
}

/* Card */
.root {
  -st-states:
    variant(enum(1, 2, 3, 4, 5, 6)),
    imagePos(enum(start, end, top, bottom));
  display: flex;
}

.root:imagePos(start),
.root:imagePos(end) {
  flex-direction: column;
}

/* Handle main orientation options. */
@media value(laptop) {
  .root:imagePos(end) {
    flex-direction: row-reverse;
  }

  .root:imagePos(start) {
    flex-direction: row;
  }
}

.root:imagePos(top) {
  flex-direction: column;
}

.root:imagePos(bottom) {
  flex-direction: column-reverse;
}

.title {}

.titleLink {}

.description {}

.body {
  -st-states: hasCtaButton;
}

.image {
  -st-extends: Image;
}

.ctaButton {
  -st-extends: Button;
}