/* media.st.css */
@namespace "Media";

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

@st-scope Base {
  Media {}

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

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

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

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

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

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

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

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

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