@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/cta-secondary";
@use "@naomi-2025/ui-core/animate-underline";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.node-teaser--story {
  &.node-teaser--text {
    border-top: s360-scss-toolkit.rem(1) solid var(--highlight-color-2);
    padding-block: site-config.spacer(1);
    transition: all 200ms ease-in-out;

    .node-teaser__header {
      > * + * {
        margin-top: site-config.spacer(0);
      }
    }

    .node-teaser__story-type {
      @extend %text-style-small-copy;

      padding: 0.5em;
      color: var(--node-teaser--color-2);
      display: inline-block;
      background-color: var(--highlight-color-2);
    }

    .node-teaser__metadata {
      display: flex;
      flex-wrap: wrap;
      gap: site-config.spacer(0);
      align-items: center;
    }

    .node-teaser__heading {
      @extend %text-style-h3;

      a {
        @extend %animate-underline-in-to-right;
      }
    }

    .node-teaser__topics {
      display: flex;
      flex-wrap: wrap;
      gap: site-config.spacer(-5);

      button,
      a {
        --cta-secondary--padding: 0.4em;
        @extend %text-style-small-copy;
        @extend %cta-secondary;
      }
    }

    &:hover,
    &:focus-within {
      background-color: var(--highlight-color-2);
    }
  }
}
