@use "../../config" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../theme" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/skeleton" as *;
@use "../link";
@use 'sass:map';

/// Story styles
/// @access public
/// @group story
@mixin text {
  // TODO: Apply changes
  > code {
    @extend .#{$prefix}--story__code;
  }
  > p {
    @extend .#{$prefix}--story__p;
  }

  > h2 {
    @extend .#{$prefix}--text__story-h2;
  }

  i {
    @extend .#{$prefix}--text__story-italic;
  }

  h1 {
    @extend .#{$prefix}--text__story-h1;
  }

  h3 {
    @extend .#{$prefix}--text__story-h3;
  }

  h4 {
    @extend .#{$prefix}--text__story-h4;
  }

  h5 {
    @extend .#{$prefix}--text__story-h5;
  }

  > a {
    @extend .#{$prefix}--story__a;
  }

  sup {
    @extend .#{$prefix}--story__sup;
  }

  em {
    @extend .#{$prefix}--text__story-italic;
  }
  b,
  strong {
    @extend .#{$prefix}--story__b;
  }

  /* All the line spacings */

  .#{$prefix}--blockquote {
    & + p,
    & + h3 {
      margin-top: $spacing-06;
    }
  }

  p + .#{$prefix}--blockquote {
    margin-top: $spacing-04;
  }

  p + h2 {
    margin-top: $spacing-08;
  }

  p + iframe {
    margin-top: $spacing-06;
  }

  ul + div {
    margin-top: $spacing-07;
  }

  ul + h2 {
    margin-top: $spacing-07;
  }

  p + h3 {
    margin-top: $spacing-08;
  }

  > p + .#{$prefix}--btn {
    margin-top: $spacing-05;
  }

  p + table {
    margin-top: $spacing-05;
  }

  p + pre {
    margin-top: $spacing-05;
  }

  p + div {
    margin-top: $spacing-05;
  }

  > div + div {
    margin-top: $spacing-05;
  }

  h1 + h2 {
    margin-top: $spacing-06;
  }

  h2 + h3 {
    margin-top: $spacing-06;
  }

  p + ul,
  h3 + ul,
  h4 + ul {
    margin-top: $spacing-05;
  }

  h3 + p {
    margin-top: $spacing-04;
  }

  button + p {
    margin-top: $spacing-05;
  }

  div + h4,
  h3 + h4 {
    margin-top: $spacing-06;
  }

  .#{$prefix}--story__h4 + div,
  h4 + div {
    margin-top: $spacing-05;
  }

  > h1 + div,
  > h2 + div,
  > h3 + div,
  > h4 + div,
  > h5 + div {
    margin-top: $spacing-05;
  }

  > h1 + .#{$prefix}--list,
  > h2 + .#{$prefix}--list,
  > h3 + .#{$prefix}--list,
  > h4 + .#{$prefix}--list,
  > h5 + .#{$prefix}--list,
  .#{$prefix}--story__h1 + .#{$prefix}--list,
  .#{$prefix}--story__h2 + .#{$prefix}--list,
  .#{$prefix}--story__h3 + .#{$prefix}--list,
  .#{$prefix}--story__h4 + .#{$prefix}--list,
  .#{$prefix}--story__h5 + .#{$prefix}--list {
    margin-top: $spacing-05;
  }

  > h1 + .#{$prefix}--code-block,
  > h2 + .#{$prefix}--code-block,
  > h3 + .#{$prefix}--code-block,
  > h4 + .#{$prefix}--code-block,
  > h5 + .#{$prefix}--code-block,
  .#{$prefix}--story__h1 + .#{$prefix}--code-block,
  .#{$prefix}--story__h2 + .#{$prefix}--code-block,
  .#{$prefix}--story__h3 + .#{$prefix}--code-block,
  .#{$prefix}--story__h4 + .#{$prefix}--code-block,
  .#{$prefix}--story__h5 + .#{$prefix}--code-block {
    margin-top: $spacing-05;
  }

  .#{$prefix}--code-block + .#{$prefix}--code-block {
    margin-top: $spacing-05;
  }

  h1 + iframe,
  h2 + iframe,
  h3 + iframe,
  h4 + iframe,
  h5 + iframe {
    margin-top: $spacing-03;
  }

  iframe + h1,
  iframe + h2,
  iframe + h3,
  iframe + h4,
  iframe + h5 {
    margin-top: $spacing-05;
  }

  .#{$prefix}--story__list {
    list-style-position: outside;
    line-height: 1.6em;
    margin: $spacing-05 0 $spacing-05 1.5em;

    li {
      list-style-type: disc;
    }
  }

  .#{$prefix}--story__sub-heading {
    @include type-style("heading-01");
    font-weight: normal;
    color: $text-body-secondary;
    margin-top: $spacing-02 !important;
    margin-bottom: $spacing-02;
    font-style: italic;
    //text-transform: uppercase;
    font-weight: 400;

    //letter-spacing: 0.05em;
  }

  .#{$prefix}--story__type-beta {
    margin-bottom: $spacing-06;
  }

  .#{$prefix}--markup {
    font-style: italic;
    @include type-style("heading-02");
    margin-bottom: $spacing-06;
  }

  .#{$prefix}--inline-highlight {
    display: inline-block;
    font-weight: 600;
    background: var(--ui-03);
    padding: 0.05em 0.1em;
  }

  .#{$prefix}--story__divider {
    border: 1px solid var(--ui-04);
  }

  .#{$prefix}--story__divider--lg {
    border: 2px solid var(--ui-04);
  }
}

@mixin typo($name) {
  /*font-size: $typography-headings-heading-1-font-size;
  text-decoration: $typography-headings-heading-1-text-decoration;
  font-family: $typography-headings-heading-1-font-family;
  font-weight: $typography-headings-heading-1-font-weight;
  font-style: $typography-headings-heading-1-font-style;
  font-stretch: $typography-headings-heading-1-font-stretch;
  letter-spacing: $typography-headings-heading-1-letter-spacing;
  line-height: $typography-headings-heading-1-line-height;*/
}

@mixin story {
  .#{$prefix}--story {
    @include reset;
    @include font-family("sans");
    //-webkit-font-smoothing: antialiased;
    //-moz-osx-font-smoothing: grayscale;
    &__center {
      text-align: center;
    }

    &__full-height {
      min-height: 65vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    @include text;
  }
  .#{$prefix}--text {
    @include text;
  }

  .#{$prefix}--story__a {
    color: $action-default-link-default;
    &:hover {
      text-decoration: underline;
    }
    //@extend .#{$prefix}--link;
  }

  a.#{$prefix}--btn {
    &:hover {
      text-decoration: none;
    }
  }

  .#{$prefix}--blockquote {
    p {
      margin: 0;
    }
  }

  .#{$prefix}--text__story-title {
    @include type-style("story-title");
    margin-bottom: $spacing-07;
    margin-left: -0.058em;
    font-weight: 500;
  }

  .#{$prefix}--helper {
    @include type-style("helper");
  }

  .#{$prefix}--text__body-regular {
    @include type-style("body-regular");
  }

  .#{$prefix}--text__input {
    @include type-style("input");
  }

  .#{$prefix}--story__content-title {
    @include type-style("productive-heading-05");
    margin-bottom: $spacing-06;
    margin-left: -0.058em;
  }

  .#{$prefix}--text__story-sub-title {
    @include type-style("story-sub-title");
    color: $action-default-fill-primary-default;
    margin-top: $spacing-07;
    margin-bottom: $spacing-02;
  }

  .#{$prefix}--story__code {
    @include type-style("code-02");
    @include font-family("code");
    padding: 0.1rem 0.4em;
    margin: 0;
    font-size: 95%;
    border-radius: 0.2em;
    background: $code-background;
    //background: rgba(#111f30, 0.08);
  }

  .#{$prefix}--story__pre {
    padding: 0.8em;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background: $code-background;
    border-radius: 6px;
    .#{$prefix}--story__code,
    code {
      @include type-style("code-02");
      @include font-family("code");
      display: inline;
      max-width: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 0;
      font-size: 100%;
    }
  }

  .#{$prefix}--story__p {
    margin-top: $spacing-05;
    line-height: 1.6em;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .#{$prefix}--text__story-italic {
    font-style: italic;
  }

  .#{$prefix}--text__story-h1 {
    @include type-style("story-h1");
  }

  .#{$prefix}--text__story-h2 {
    @include type-style("story-h2");
    margin-top: $spacing-07;

    &.before--img {
      margin-bottom: 0;
    }
  }

  .#{$prefix}--text__story-h3 {
    margin-top: $spacing-07;
    @include type-style("story-h3");
    // font-size: $typography-body-copy-16px-bold-font-weight;
    // font-weight: $typography-body-copy-16px-bold-font-weight;
  }

  .#{$prefix}--text__story-h4 {
    margin-top: $spacing-06;
    @include type-style("story-h4");
  }

  .#{$prefix}--text__story-h5 {
    margin-top: $spacing-06;
    @include type-style("story-h5");
  }

  .#{$prefix}--text__story-h6 {
    margin-top: $spacing-06;
    @include type-style("story-h6");
  }

  .#{$prefix}--story__caption {
    @include type-style("caption");
  }

  .#{$prefix}--story__sup {
    font-size: 0.7em;
    background: var(--ui-03);
    vertical-align: top;
    position: relative;
    top: -0.5em;

    > a {
      text-decoration: none;

      &:before {
        content: "[";
      }

      &:after {
        content: "]";
      }
    }
  }

  .#{$prefix}--story__inline-highlight {
    display: inline-block;
    font-weight: 600;
    background: var(--ui-03);
    padding: 0.05em 0.1em;
  }

  .docblock-source {
    margin-top: $spacing-03 !important;
  }
  .#{$prefix}--story__bold {
    font-weight: 600;
  }

  .#{$prefix}--story__b,
  .#{$prefix}--story__strong {
    font-weight: 600;
  }

  $spacing-baseline: 1rem !default;

  $spacing-3xs: $spacing-baseline * 0.125 !default;
  $spacing-2xs: $spacing-baseline * 0.25 !default;
  $spacing-xs: $spacing-baseline * 0.5 !default;
  $spacing-sm: $spacing-baseline * 0.75 !default;
  $spacing-md: $spacing-baseline !default;
  $spacing-lg: $spacing-baseline * 1.5 !default;
  $spacing-xl: $spacing-baseline * 2 !default;
  $spacing-2xl: $spacing-baseline * 2.5 !default;
  $spacing-3xl: $spacing-baseline * 3 !default;
  $spacing-4xl: $spacing-baseline * 4 !default;
  $spacing-5xl: $spacing-baseline * 5 !default;
  $spacing-6xl: $spacing-baseline * 6 !default;

  $spacing-map: (
    "none": 0,
    "3xs": $spacing-3xs,
    "2x": $spacing-2xs,
    "xs": $spacing-xs,
    "sm": $spacing-sm,
    "md": $spacing-md,
    "lg": $spacing-lg,
    "xl": $spacing-xl,
    "2xl": $spacing-2xl,
    "3xl": $spacing-3xl,
    "4xl": $spacing-4xl,
    "5xl": $spacing-5xl,
    "6xl": $spacing-6xl,
  );

  /*
  @mixin spacing($size, $position) {
    @if map-has-key($spacing-map, $size) {
      @if $positon == 'bottom' {
        margin-bottom: map-get($spacing-map, $size);
      }
    } @else {
      @warn 'This is not a step of the WFP Spacing Scale!';
    }
  }
*/
  // TODO Look into it later
  @each $size, $glyph in $spacing-map {
    .#{$prefix}--story__spacing-top-#{$size},
    .#{$prefix}--text__spacing-top-#{$size} {
      margin-top: map.get($spacing-map, $size) !important;
    }
    .#{$prefix}--story__spacing-bottom-#{$size},
    .#{$prefix}--text__spacing-bottom-#{$size} {
      margin-bottom: map.get($spacing-map, $size) !important;
    }
  }
}