/**
 * Creates a container element with a specified maximum width, centered horizontally on the page.
 * Set to false or null, `max-width` will not be applied and this becomes a fluid container.
 *
 * @param {string} [$max-width="container"] - The maximum width of the container
 *                                            Allowed values: "outer-container", "container", "inner-container", "prose", "search"
 *                                            Defaults to "container"
 *
 */
@mixin container($max-width: "container") {
  @if $max-width {
    max-width: map-get($max-w, $max-width);
  }

  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: $gutter / 2;
  padding-right: $gutter / 2;
}

@mixin style-text-link(
  $underline: true,
  $color: map-get($color-aliases, "text-link"),
  $color-hover: map-get($color-aliases, "text-link-hover")
) {
  color: $color;

  @if $underline {
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-color: #d6c7ff;
    transition: color $transition-speed, text-decoration-color $transition-speed;
  } @else {
    text-decoration: none;
    transition: color $transition-speed;
  }

  &:hover {
    color: $color-hover;
    @if $underline {
      text-decoration-color: map-get($color-aliases, "text-link-hover");
      transition: color $transition-speed,
        text-decoration-color $transition-speed;
    }
  }

  &:has(code) {
    text-decoration: none;
  }

  &.external-link {
    &::after {
      content: "↗";
      display: inline-block;
      margin-left: 0.1em;
    }
  }
}

@mixin margin($margin: 1) {
  margin-bottom: #{$margin}em;
  margin-top: #{$margin}em;
}

@mixin heading($font-size, $margin-top: 2rem, $margin-bottom: 1rem) {
  clear: both;
  color: map-get($color-aliases, "text-display");
  font-family: $font-family-display;
  font-size: $font-size;
  font-style: normal;
  font-weight: 500;
  line-height: map-get($line-heights, "heading");
  scroll-margin-top: 1.75em;
  margin-top: 1.75em;
  margin-bottom: 0.4em;
  display: block;
}

@mixin code-bg {
  background-color: #eeeefa;
  border-radius: $rounded;
  padding: 0.185em 0.375em;
}
