@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/spacings';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-card {
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
  max-inline-size: 100%;
  min-inline-size: min-content;
  border-radius: var(--vtmn-radius_200);
  box-shadow: var(--vtmn-shadow_100);
  position: relative;
}

.vtmn-card_content {
  margin: var(--vtmn-spacing_4);
  display: flex;
  flex-direction: column;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-card_content
  > *:not(.vtmn-card_content--title, .vtmn-card_content--body) {
  margin-block-start: var(--vtmn-spacing_3);
}

.vtmn-card_content--title {
  all: unset;
  font-size: var(--vtmn-typo_title-5-font-size);
  font-weight: var(--vtmn-typo_font-weight--bold);
}

.vtmn-card_content--body {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-card,
.vtmn-card_variant--top-image {
  display: flex;
  flex-direction: column;
  block-size: fit-content;
  background-color: var(--vtmn-semantic-color_background-primary);
}

.vtmn-card > .vtmn-card_image,
.vtmn-card_variant--top-image > .vtmn-card_image {
  inline-size: auto;
  block-size: 100%;
  margin: var(--vtmn-spacing_4);
  position: relative;
}

.vtmn-card_image img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.vtmn-card > .vtmn-card_image--full,
.vtmn-card_variant--top-image > .vtmn-card_image--full {
  inline-size: fit-content;
  block-size: 100%;
  margin: 0;
}

.vtmn-card > .vtmn-card_image--full > img,
.vtmn-card_variant--top-image > .vtmn-card_image--full > img {
  border-radius: var(--vtmn-radius_200) var(--vtmn-radius_200) 0 0;
}

.vtmn-card img,
.vtmn-card_variant--top-image img {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
}

.vtmn-card_variant--top-image .vtmn-tag,
.vtmn-card_variant--full-image .vtmn-tag {
  position: absolute;
  inset-block-start: var(--vtmn-spacing_4);
  inset-inline-start: var(--vtmn-spacing_4);
}

.vtmn-card_image--full > img {
  aspect-ratio: auto;
}

.vtmn-card_variant--side-image {
  display: flex;
  block-size: min-content;
  flex-direction: row;
  background-color: var(--vtmn-semantic-color_background-primary);
}

.vtmn-card_variant--side-image > .vtmn-card_content {
  margin-inline-start: 0;
  inline-size: 67%;
}

.vtmn-card_variant--side-image > .vtmn-card_image {
  inline-size: 33%;
  block-size: max-content;
  margin: var(--vtmn-spacing_4);
}

.vtmn-card_variant--side-image img {
  block-size: 100%;
}

.vtmn-card_variant--side-image .vtmn-btn {
  inline-size: fit-content;
}

.vtmn-card_variant--full-image > .vtmn-card_image {
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
}

.vtmn-card_variant--full-image img {
  block-size: 100%;
  border-radius: var(--vtmn-radius_200);
}

.vtmn-card_variant--full-image > .vtmn-card_content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  padding: var(--vtmn-spacing_4);
  block-size: auto;
  border-radius: var(--vtmn-radius_200);
  color: var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-card_variant--full-image
  > .vtmn-card_content:not(.vtmn-card_content--opaque) {
  background: linear-gradient(
    180deg,
    color-mod(var(--vtmn-semantic-color_background-primary-reversed) alpha(0%)),
    var(--vtmn-semantic-color_background-primary-reversed)
  );
}

.vtmn-card_variant--full-image > .vtmn-card_content.vtmn-card_content--opaque {
  background-color: hsl(
    var(--vtmn-semantic-color_background-primary-reversed--h)
      var(--vtmn-semantic-color_background-primary-reversed--s)
      var(--vtmn-semantic-color_background-primary-reversed--l) / 60%
  );
}
