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

@value breakpoint-sm from "pageflow-scrolled/values/breakpoints.module.css";

.item {
  position: relative;
  margin: 0;
  padding: 0;
}

.item > a {
  text-decoration: none;
}

.outlined::before {
  content: "";
  display: block;
  position: absolute;
  inset: -4px;
  border: solid 1px currentColor;
  opacity: 0;
}

.highlighted::before,
.item:where(:hover)::before {
  opacity: 0.5;
}

.selected::before {
  opacity: 1;
}

.textPosition-below .cardWrapper,
.textPosition-right .cardWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.card {
  display: flex;
  border-radius: var(--theme-content-element-box-border-radius);
  overflow: hidden;
  will-change: transform;
  flex: 1;
}

.textPosition-below .card {
  flex-direction: column;
}

.textPosition-overlay .card {
  display: grid;
}

.textPosition-overlay .card > * {
  grid-row: 1;
  grid-column: 1;
}

.textPosition-none {
  composes: textPosition-below;
}

.textPosition-title {
  composes: textPosition-none;
}

.link.textPosition-below .cardWrapper {
  --hover-scale: var(--theme-external-links-card-hover-scale, 1.05);
}

.link.textPosition-right .cardWrapper {
  --hover-scale: var(--theme-external-links-card-hover-scale, 1.02);
}

.link:not(.outlined):hover .cardWrapper {
  transform: scale(calc(1 + (var(--hover-scale) - 1) * var(--hover-scale-adjustment, 1)));
}

.link .card:hover .title {
  text-decoration: underline;
}

.textPosition-right .thumbnail {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.textPosition-right .thumbnailSize-medium .thumbnail {
  width: 50%;
}

.textPosition-right .thumbnailSize-large .thumbnail {
  width: 66%;
}

.textPosition-overlay .thumbnail {
  width: 100%;
}

.light {
  composes: scope-darkContent from global;
  --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor);
  --card-surface-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
}

.dark {
  composes: scope-lightContent from global;
  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
  --card-surface-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
}

.background {
  color: var(--content-text-color);
  background-color: var(--card-surface-color);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.textPosition-below .background,
.textPosition-overlay .background {
  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
  padding-left: min(var(--padding-inline), 5px);
  padding-right: min(var(--padding-inline), 5px);
}

.textPosition-overlay .background {
  position: relative;
  align-self: end;
  background: transparent;
  z-index: 1;
}

.textPosition-overlay .background::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, var(--card-surface-color), transparent);
  opacity: calc(0.9 * var(--overlay-opacity, 0.7));
  pointer-events: none;
}

.textPosition-none .background {
  display: none;
}

.details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.textPosition-below .details,
.textPosition-overlay .details {
  padding-top: 15px;
  padding-bottom: 20px;
  padding-left: calc(var(--padding-inline) - 5px);
  padding-right: calc(var(--padding-inline) - 5px);
}

.textPosition-below .details:first-child,
.textPosition-overlay .details:first-child {
  padding-top: 20px;
}

.textPosition-right .details {
  justify-content: center;
  padding: max(10px, 10%) max(20px, 3%);
}

.details p,
.textPosition-overlay .title:last-child {
  margin-bottom: 0;
}

.details p {
  margin-top: 1rem;
}

.details > :first-child p {
  margin-top: 0;
}

.button {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.textPosition-below .button,
.textPosition-overlay .button {
  margin-bottom: -5px;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.textPosition-right .inlineFileRightsAfterCard {
  display: flex;
}
