/* image.st.css */
@namespace "Image";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    --color-accent-1,
    --color-body,
    --gutter-width-md,
    --spacing-unit;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/Image/image.st.css";
  -st-default: Image;
}

@st-scope Base {
  Image {}

  Image::figure {
    padding: 0;
    margin: 0;
  }

  Image::figcaption {
    margin-top: calc(.95em + var(--spacing-unit));
    padding-top: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
  }

  Image::captionGroup::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background-color: var(--color-accent-1);
    margin-top: 10px;
  }

  Image::caption {
    margin-bottom: 0;
    padding: calc(.5em) 0;
  }

  Image::copyright {
    display: flex;
    align-items: center;
    padding: calc(.5em) 0;
    margin-bottom: 0;
  }

  Image::icon {
    color: var(--color-body);
    margin-right: 14px;
    line-height: 1;
  }

  Image:isSquare,
  Image:isPortrait {
    max-width: 50%;
  }

  /* Image Sizes */
  /* fullbleed */
  Image:imageSize(fullBleed) {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }

  Image:imageSize(fullBleed)::figcaption {
    margin-left: var(--gutter-width-md);
    margin-right: var(--gutter-width-md);
  }
}