@value (
  darkContentSurfaceColor, lightContentSurfaceColor,
  darkContentTextColor, lightContentTextColor,
  darkContentLinkColor, lightContentLinkColor
) from "pageflow-scrolled/values/colors.module.css";

.card {
  --theme-first-heading-landscape-padding-top: 0;

  composes: scope-cardsAppearance from global;
  position: relative;
  padding: 0 1.5em;
  margin-top: -1px;
  padding-top: 1px;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.selfClear-left::after,
.selfClear-right::after,
.selfClear-both::after {
  content: '';
  display: block;
}

.selfClear-left::after {
  clear: left;
}

.selfClear-right::after {
  clear: right;
}

.selfClear-both::after {
  clear: both;
}

.cardStart {
  margin-top: 3em;
}

.cardEnd {
  margin-bottom: 3em;
  padding-bottom: 1.5em;
}

.cardStart::before {
  border-top-left-radius: var(--theme-cards-border-radius, 15px);
  border-top-right-radius: var(--theme-cards-border-radius, 15px);
}

.cardEnd::before {
  border-bottom-left-radius: var(--theme-cards-border-radius, 15px);
  border-bottom-right-radius: var(--theme-cards-border-radius, 15px);
}

.cardBgWhite {
  composes: scope-darkContent from global;
}

.cardBgBlack {
  composes: scope-lightContent from global;
}

@media screen {
  .cardBgWhite::before {
    background-color: var(--card-surface-color, lightContentSurfaceColor);
  }

  .cardBgBlack::before {
    background-color: var(--card-surface-color, darkContentSurfaceColor);
  }

  .cardBgWhite {
    color: darkContentTextColor;
    --content-text-color: darkContentTextColor;
    --content-link-color: darkContentLinkColor;
  }

  .cardBgBlack {
    color: lightContentTextColor;
    --content-text-color: lightContentTextColor;
    --content-link-color: lightContentLinkColor;
  }
}
