/** hero.st.css */
@namespace "Hero";

:import {
  -st-from: "../../common/project.st.css";
  -st-default: Project;
  -st-named:
    tablet,
    laptop,
    widelaptop,
    desktop,
    large;
}

: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/Media/media.st.css";
  -st-default: Media;
}

:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

.root {
  -st-states:
    variant(enum(basic, hasImage)),
    hasOverlay;
  /* overridable by any theme. */
  --overlay-bg: rgba(0, 0, 0, 0.2);
}

.image {
  -st-extends: Image;
}

/* @todo: Maybe describe the use rather than the semantics choosen. */
.header {}

.headerContent {}

.title {}

.description {}

.cta {
  -st-extends: Button;
}

.media {
  -st-extends: Media;
}

@media value(tablet) {

  /* Variant: hasImage */
  .root:variant(hasImage) {
    /* Image is positioned absolutely within. */
    position: relative;
  }

  .root:variant(hasImage)::header {
    /* 'Header' is presented on top of the image, so highest z. */
    position: relative;
    z-index: 20;
  }

  .root:variant(hasImage)::image,
  .root:variant(hasImage)::media {
    /* Making the background image centered to cover the entire container */
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    /* Image stacked at the bottom. */
    z-index: 0;
  }

  .root:variant(hasImage)::image::imageContainer {
    height: 100%;
  }

  /* Media Component */
  .root:variant(hasImage)::media::mediaContainer {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .root:variant(hasImage):hasOverlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Apply the defualt bg, can be imported and overridden by theme. */
    background: var(--overlay-bg);
    /* Overlay on top of the image but underneth the content(header). */
    z-index: 10;
  }
}