Summary: Sponsored

$summary__author-size: map(sizes, xlarge);

@keyframes corner-forward {
  from {
    z-index: map(layers, default);
    background-position: -0.5em;
  }

  to {
    z-index: calc(map(layers, default) + 1);
    background-position: -50.5em;
  }
}

@keyframes corner-reverse {
  from {
    z-index: calc(map(layers, default) + 1);
    background-position: -50.5em;
  }

  to {
    z-index: map(layers, default);
    background-position: -0.5em;
  }
}

.c-summary {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  padding: map(spaces, medium) calc(map(spaces, large) - map(spaces, xsmall));
  background-color: white;
  box-shadow: 1px 1px 0 $prose-color--shadow;

  @media (-ms-high-contrast: active) {
    border: 1px solid;
  }

  @media print {
    padding-bottom: 0;
    height: auto !important;
    min-height: 12em;
    page-break-inside: avoid;
  }
}

.c-summary__header {
  min-height: map(sizes, large);
  margin-bottom: map(spaces, medium);

  @media print {
    border-top: 1px solid black;
    padding-top: map(spaces, medium);
  }
}

.c-summary__title {
  @apply --typeset-summary-title;

  padding-right: calc($summary__author-size - map(spaces, medium));

  a::before {
    content: '';
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: map(layers, default);
    white-space: nowrap;
    text-indent: 200%;
  }

  a:focus {
    outline: none;

    &::before {
      outline: 2px solid $color-focus;
    }
  }
}

.c-summary__main {
  @apply --typeset-prose;

  max-width: 75ch;
  font-size: 0.875rem;

  a,
  em {
    font-family: map(fonts, family-sans);
    font-style: normal;
    font-weight: 700;
    color: inherit;
  }
}

.c-summary__footer {
  @media screen {
    margin-top: auto;
    padding-top: map(spaces, medium);
  }
}

.c-summary__meta {
  @apply --typeset-label;

  color: map(colors, neutral, dark);

  .dt-published {
    margin-right: map(spaces, medium);
  }
}

.c-summary__author {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  pointer-events: none;

  @media print {
    display: none;
  }

  img {
    display: block;
    height: $summary__author-size;
    width: $summary__author-size;
    transition: transform $author-duration ease-out;

    @media (prefers-reduced-motion) {
      transition: none;
    }
  }

  span {
    @apply --hidden;
  }
}

.c-summary__author-url {
  display: block;
  overflow: hidden;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: map(layers, default);
    height: $summary__author-size;
    width: $summary__author-size;
    background-image: linear-gradient(to top right, white, white 50%, transparent 50%, transparent);
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: $summary__author-size;
    width: $summary__author-size;
    background: inline('corner.svg') -0.5em 0 no-repeat;
    background-size: size('corner.svg');
  }

  .c-summary:hover &,
  &:focus {
    img {
      transform: scale(1.2);
      transform-origin: bottom left;
    }

    &::after {
      z-index: calc(map(layers, default) + 1);
      animation: corner-forward 0.15s steps(10);
      animation-fill-mode: forwards;
    }
  }

  &:focus {
    box-shadow: 0 0 2px 0 $color-focus;
  }
}

.c-summary--countdown {
  .c-summary__header {
    padding-left: calc(map(spaces, large) + map(spaces, xsmall));
  }

  .c-summary__footer {
    padding-top: 0;
  }

  .dt-published {
    @apply --typeset-summary-title;

    font-weight: 400;
    position: absolute;
    top: map(spaces, medium);
    left: calc(map(spaces, medium) + map(spaces, xsmall));
    z-index: 0;

    span {
      @apply --hidden;
    }

    @media print {
      top: 2rem;
    }
  }
}

.c-summary--taken {
  .c-summary__title {
    opacity: 0.66;
    text-decoration: line-through;
  }

  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, color(map(colors, neutral, lightest) a(75%)) 4px, color(map(colors, neutral, lightest) a(75%)) 8px);
}