/* ------------------------------------*\
    $MIXINS
\*------------------------------------ */

/**
 * Dashed border accent
 */
@mixin border-accent($direction: right, $position: right, $color: rgb(var(--color-gray))) {
  background-image: linear-gradient(to $direction, transparent 50%, $color 50%);
  background-position: $position bottom;
  @if $direction == "right" {
    background-repeat: repeat-x;
    background-size: 16px 1px;
  }
  @else {
    background-repeat: repeat-y;
    background-size: 1px 16px;
  }
}

/**
 * Block link hover styles
 */
@mixin block-hover {
  color: rgb(var(--color-ember-red));
  text-decoration: underline;
  text-decoration-style: dotted;
}

@mixin dot-divider(
  $font-size: 18px,
) {
  content: "•";
  display: inline-block;
  margin-right: var(--space-2);
  margin-left: calc(var(--space-1) * -1);
  color: rgb(var(--color-gray));
  font-size: $font-size;
  transform: translateY(.08em);
}


// Used for line wrapping text links.
@mixin inline-accent(
  $text-color: rgb(var(--color-dark-gray)),
  $underline-color: rgb(var(--color-dark-gray)),
  $hover-underline-color: rgb(var(--color-ember-red)),
  $hover-bg-color: rgb(var(--color-ember-red)),
  $hover-text-color: rgb(var(--color-white)),
) {
  color: $text-color;
  background-image: linear-gradient(to right, transparent 55%, rgb(var(--color-dark-gray)) 45%);
  background-position: left bottom .13em;
  background-repeat: repeat-x;
  background-size: 4px 2px;
  box-decoration-break: clone;
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.6;
  display: inline;
  box-decoration-break: clone;

  &:hover {
    color: $hover-text-color;
    background-image: linear-gradient(to right, transparent 55%, rgb(var(--color-ember-red)) 45%);

    @if $hover-bg-color {
      background-color: rgb(var(--color-ember-red));
    }
    @else {
      background-color: transparent;
    }
  }
}

// Consistent styles for reversed out text and links.
@mixin reversed-out-text {
  color: rgb(var(--color-white));

  p a,
  a:not(.o-button) {
    color: rgb(var(--color-white));
    border-bottom-color: rgb(var(--color-white));

    &:hover {
      color: rgb(var(--color-white));
      opacity: var(--opacity-hover);
      background-color: transparent;
    }
  }
}