@include hover-slide() {
  @for $i from 1 through 3 {
    @include add-breakpoint-prefixes {
      &hover--slide-u#{$i} {
        transition: transform $speed-1;

        &:hover {
          transform: translate3d(0, -(map-get($spacing, $i)), 0);
          transition: transform $speed-1;
        }
      }
    }
  }
}

@include hover-border() {
  @include add-breakpoint-prefixes {
    &hover--border-charcoal {
      transition: transform $speed-1;

      &:hover {
        border-color: $charcoal !important;
        transition: transform $speed-1;
      }
    }

    &hover--border-red {
      transition: transform $speed-1;

      &:hover {
        border-color: $red !important;
        transition: transform $speed-1;
      }
    }

    &hover--border-dark-red {
      transition: transform $speed-1;

      &:hover {
        border-color: $red-darker !important;
        transition: transform $speed-1;
      }
    }
  }
}

@include hover-box-shadow() {
  @include add-breakpoint-prefixes {
    &hover--box-shadow-primary {
      &:hover {
        box-shadow: $button-shadow-dark !important;
      }
    }

    &hover--box-shadow-secondary {
      &:hover {
        box-shadow: $button-shadow-light !important;
      }
    }
  }
}

@include hover-underline() {
  @include add-breakpoint-prefixes {
    &hover--border-cyan-dark {
      transition: border-color $speed-1;

      &:hover {
        border-color: $cyan-darker !important;
        transition: border-color $speed-1;
      }
    }

    &hover--border-red-dark {
      transition: border-color $speed-1;

      &:hover {
        border-color: $red-darker !important;
        transition: border-color $speed-1;
      }
    }
  }
}

@include hover-text-color() {
  @include add-breakpoint-prefixes {
    &hover--text-cyan-dark {
      transition: color $speed-1;

      &:hover {
        color: $cyan-darker !important;
        transition: color $speed-1;

        svg {
          fill: $cyan-darker !important;
          transition: color $speed-1;
        }
      }
    }
    &hover--text-gray-mid {
      transition: color $speed-1;

      &:hover {
        color: $gray-mid !important;
        transition: color $speed-1;

        svg {
          fill: $gray-mid !important;
          transition: color $speed-1;
        }
      }
    }
    &hover--text-red {
      transition: color $speed-1;

      &:hover {
        color: $red !important;
        transition: color $speed-1;

        svg {
          fill: $red !important;
          transition: color $speed-1;
        }
      }
    }

    &hover--text-red-dark {
      transition: color $speed-1;

      &:hover {
        color: $red-darker !important;
        transition: color $speed-1;

        svg {
          fill: $red-darker !important;
          transition: color $speed-1;
        }
      }
    }
  }
}

@include hover-button-fill() {
  @include add-breakpoint-prefixes {
    &hover--fill-cyan-dark {
      transition: background-color $speed-1, border-color $speed-1;

      &:hover {
        background-color: $cyan-darker !important;
        transition:  background-color $speed-1, border-color $speed-1;

        svg {
          fill: $cyan-darker !important;
          transition: background-color $speed-1;
        }
      }
    }

    &hover--fill-red-dark {
      transition: background-color $speed-1, border-color $speed-1;

      &:hover {
        background-color: $red-darker !important;
        transition:  background-color $speed-1, border-color $speed-1;
      }
    }

    &hover--fill-red {
      transition: background-color $speed-1, border-color $speed-1;

      &:hover {
        background-color: $red !important;
        transition:  background-color $speed-1, border-color $speed-1;
      }
    }

    &hover--fill-charcoal {
      transition: background-color $speed-1, border-color $speed-1;

      &:hover {
        background-color: $charcoal !important;
        transition:  background-color $speed-1, border-color $speed-1;
      }
    }
  }
}

@include hover-scale-image() {
  @include add-breakpoint-prefixes {
    &hover--scale-image {

      img {
        transition: all $speed-3 ease-in-out;
      }

      &:hover img {
        transform: scale(1.06);
        transition: all $speed-3 ease-in-out;
      }
    }
  }
}

@include hover-svg-fill() {
  @include add-breakpoint-prefixes {
    &hover--svgfill-red-dark {
      transition: fill $speed-1, border-color $speed-1;

      &:hover {
        fill: $red-darker !important;
        transition: fill $speed-1, border-color $speed-1;
      }
    }

    &hover--svgfill-red {
      transition: fill $speed-1, border-color $speed-1;

      &:hover {
        fill: $red !important;
        transition: fill $speed-1, border-color $speed-1;
      }
    }

    &hover--svgfill-charcoal {
      transition: fill $speed-1, border-color $speed-1;

      &:hover {
        fill: $charcoal !important;
        transition: fill $speed-1, border-color $speed-1;
      }
    }

    &hover--svgfill-white {
      transition: fill $speed-1, border-color $speed-1;

      &:hover {
        fill: $white !important;
        transition: fill $speed-1, border-color $speed-1;
      }
    }
  }
}