@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Text: helpers
// *
////////////////////////////////////////////////////////////////////////////////


// * Mixins to manage & share the styling
// =============================================================================

@mixin p {
  &:not(:last-child) {
    margin-bottom: var(--gap-md);
  }
}

@mixin blockquote {
  position: relative;
  margin: 0 0 var(--gap-md);
  padding: 0;
  width: 100%;
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  font-style: italic;
  color: hsl(var(--clr-spot-1));
  background-color: transparent;

  &::before {
    content: "\201C";
    margin-right: rem(4);
  }
  &::after {
    content: "\201D";
    margin-left: rem(-4);
  }

  p {
    display: inline;
  }
}

@mixin hr {
  display: block;
  box-sizing: content-box;
  overflow: visible;
  margin: var(--gap-md) 0;
  padding: 0;
  width: 100%;
  height: 0;
  border: 0;
  border-top: rem(1) solid hsl(var(--clr-border));
}

@mixin pre {
  overflow: auto;
  margin: 0 0 var(--gap-md) 0;
  padding: rem(15);
  border: rem(1) solid rgba(black, .15);
  border-radius: rem(5);
  font-family: monospace;
  font-size: 1em;
  white-space: pre-line; // break long lines up
  color: hsl(var(--clr-base));
  background-color: hsl(var(--clr-white));
}

@mixin highlight {
  display: inline-block;
  color: hsl(var(--clr-base-dark));
  background-color: #ff0;
}

@mixin small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

@mixin text-long {
  // Text alignment.
  .text-align-right {
    text-align: right;
  }

  .text-align-center {
    text-align: center;
  }

  .text-align-justify {
    text-align: justify;
  }

  // reset margins
  p,
  .p {
    &.no-margin {
      margin-bottom: 0;
    }
  }

  // Realign bullets.
  ul:not(.inline),
  ol:not(.inline) {
    .text-align-right::before,
    .text-align-center::before {
      position: relative;
      top: 0;
      left: 0;
      display: inline-block;
      margin-right: rem(10);
    }
  }

  blockquote,
  .blockquote {
    @include blockquote;
    &:last-child {
      margin-bottom: 0;
    }
  }

  hr,
  .hr {
    @include hr;
    &:last-child {
      margin-bottom: 0;
    }
  }

  pre,
  .pre {
    @include pre;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
