@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.thumbnailSignpost button {
  all: unset;
  cursor: pointer;
}

.thumbnailSignpost {
  display: inline-flex;
  flex-direction: row;
  gap: var(--arc-size-grid-gutter-m);
  max-width: 720px;
}

.isLink:focus {
  cursor: pointer;
  outline: var(--focus-border-weight-s) solid
    var(--focus-colors-light-border-subtle);
  outline-offset: 2px;
  border-radius: calc(var(--thumbnail-signpost-border-radius-s) + 2px);
}

.onDarkSurface.isLink:focus {
  outline-color: var(--focus-colors-dark-border-subtle);
}

.isLink:hover {
  cursor: pointer;
}

.content {
  width: 100%;
  font: var(--sem-type-body-reg-s);
}

.heading {
  display: block;
  font: var(--sem-type-mobile-semi-xxs);
  font-family: var(--sem-font-family-heading);
  font-size: 1em;
  font-weight: var(--sem-font-weight-semi-bold);
  margin: 0;
}

.isLink:hover .heading,
.isLink:focus .heading {
  color: var(--button-v2-colors-light-text-hover);
  text-decoration: underline;
}

.onDarkSurface.isLink:hover .heading,
.onDarkSurface.isLink:focus .heading {
  color: var(--surface-colors-bg-light-white);
  text-decoration: underline;
}

.image {
  width: calc(
    (((100% + var(--arc-size-grid-gutter-s)) / 12) * 6) -
      var(--arc-size-grid-gutter-s)
  );
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */
.image img {
  border-radius: var(--thumbnail-signpost-border-radius-s);
  width: 100%;
}

@media (--arc-custom-media-min-width-s-px) {
  .image {
    width: calc(
      (((100% + var(--arc-size-grid-gutter-s)) / 12) * 6) -
        var(--arc-size-grid-gutter-m)
    );
  }

  .thumbnailSignpost {
    gap: var(--arc-size-grid-gutter-m);
  }

  .heading {
    font: var(--sem-type-mobile-semi-xs);
  }
}

@media (--arc-custom-media-min-width-xl-px) {
  .thumbnailSignpost {
    gap: var(--arc-size-grid-gutter-l);
  }
}

.thumbnailButton {
  display: flex;
  align-items: center;
  gap: var(--button-v2-gap-xs);
  color: var(--button-v2-colors-light-text-default);
  font: var(--sem-type-interface-button-s);
  height: var(--button-v2-size-s);
}

.buttonIcon {
  background: var(--icon-color-brand-alt-light);
  display: block;
  height: 100%;
  line-height: 0;
  mask-position: center;
  mask-size: contain;
  width: 100%;
}

.onDarkSurface .buttonIcon {
  background: var(--surface-colors-bg-light-white);
}

.onDarkSurface .thumbnailButton {
  color: var(--surface-colors-bg-light-white);
}

.isLink:focus .buttonIcon,
.isLink:hover .buttonIcon {
  background: var(--button-v2-colors-light-text-hover);
}

.onDarkSurface.isLink:focus .buttonIcon,
.onDarkSurface.isLink:hover .buttonIcon {
  background: var(--button-v2-colors-dark-text-hover);
}

.isLink:hover .thumbnailButton,
.isLink:focus .thumbnailButton {
  background: none;
  color: var(--button-v2-colors-light-text-hover);
  text-decoration: var(--sem-underline);
}

.onDarkSurface.isLink:hover .thumbnailButton,
.onDarkSurface.isLink:focus .thumbnailButton {
  background: none;
  color: var(--button-v2-colors-dark-text-hover);
  text-decoration: var(--sem-underline);
}