@use 'sass:math';

/**
 * Mixins
 * Contains global SCSS mixins
 */
@use '_variables' as *;
@use '_functions' as *;

/// Clearfix
@mixin clearfix() {
  &:after {
    display: table;
    content: '';
    clear: both;
  }
}

/// Image replacement
@mixin ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0; // Remove the default border from elements like <button>
  font: 0/0 a; // Crush the text down to take up no space
  text-shadow: none; // Remove any text shadows
  color: transparent; // Hide any residual text in Safari 4 and any mobile devices that may need it
  background-color: transparent; // Hide the default background color on elements like <button>
}

/// Invisible elements
@mixin element-invisible {
  border: 0;
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

/// Show an invisible element
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

/// Show invisible element when focused
@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

/// Full width mixin to break content out into gutters
@mixin full-width() {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/// Content Gutter
@mixin gutter {
  padding-left: 18px;
  padding-right: 18px;

  @media screen and (min-width: $break-medium) {
    padding-left: 31px;
    padding-right: 31px;
  }

  @media screen and (min-width: $break-large) {
    padding-left: 58px;
    padding-right: 58px;
  }
}

/// Maximum width Object
@mixin content-full {
  max-width: $content-max;
  margin-left: auto;
  margin-right: auto;
}

@mixin swipe($type: "blue", $direction: "right", $vertPosOffset: 0px) {
  $svgWidth: 1200;
  $svgHeight: 300;

  @include full-width();
  @include gutter;

  margin-top: calc(((100vw / $svgWidth) * $svgHeight) + $vertPosOffset) !important;
  margin-left: -50vw !important;

  // Sets padding and negative margins of previous section element.
  // &+section:not(:last-of-type, .obj-swipe) {
  //   // If previous object doesn't have a sweep, set margin
  //   margin-bottom: calc(((100vw / $svgWidth) * $svgHeight) + 100px) !important; // where "100px" refers to the padding from the section tontent to the top point of the following component's sweep below it
  // }

  &:has(+ section.obj-swipe) {
    margin-bottom: calc(-1 * ((100vw / $svgWidth) * $svgHeight)) !important;
    padding-bottom: calc(((100vw / $svgWidth) * $svgHeight) + 50px) !important; // where "50px" refers to the padding from the section tontent to the top point of the following component's sweep below it

    @media screen and (min-width: $break-medium) {
      padding-bottom: calc(((100vw / $svgWidth) * $svgHeight) + 100px) !important; // where "100px" refers to the padding from the section tontent to the top point of the following component's sweep below it
    }
  }

  &:before {
    content: '';
    position: absolute;
    display: block;
    bottom: calc(100% + $vertPosOffset - 2px); // Where "2px" accounts for slight overhang that occours as svg scales in size
    left: 50%;
    width: calc(100svw + 2px); // Where "2px" accounts for slight overhang that occours as svg scales in size
    height: auto;
    transform: translateX(-50%);
    z-index: -1;

    @if ($type =="blue") {
      background: url('../../assets/img/swoop-blue.svg');
      background-position: 50% top;
      background-size: 100%;
      background-repeat: no-repeat;
      aspect-ratio: math.div($svgWidth, $svgHeight);
    }

    @else if ($type =="white") {
      background: url('../../assets/img/swoop-white.svg');
      background-position: 50% top;
      background-size: 100%;
      background-repeat: no-repeat;
      aspect-ratio: math.div($svgWidth, $svgHeight);
    }

    @else if ($type =="watercolor") {
      background: url('../../assets/img/swoop-watercolor.svg');
      background-position: 50% top;
      background-size: 100%;
      background-repeat: no-repeat;
      aspect-ratio: math.div($svgWidth, $svgHeight);
    }

    @if ($direction =="left") {
      transform: translateX(-50%) scaleX(-1);

      @if ($type =="watercolor") {
        transform: translateX(-50%) scaleX(-1);
      }
    }
  }

  &:after {
    content: '';
    position: absolute;
    display: block;
    top: calc(0px - $vertPosOffset);
    left: 50%;
    width: calc(100svw + 2px); // Where "2px" accounts for slight overhang that occours as svg scales in size
    height: calc(($vertPosOffset) + 100%);
    transform: translateX(-50%);
    z-index: -2;

    @if ($type =="blue") {
      background: $color-blue-dark;
    }

    @else if ($type =="white") {
      background: $color-white;
    }

    @else if ($type =="watercolor") {
      background: url('../../assets/img/watercolor/watercolor.jpg');
      background-position: center calc(-1 * ((100vw / $svgWidth) * $svgHeight));
      background-size: 100%;
      background-repeat: repeat;
      bottom: 0;
      background-size: 100%;
      height: auto;
    }

    @if ($direction =="left") {
      transform: translateX(-50%) scaleX(-1);
    }
  }
}

// Example objects, found in keyscreens/swoop-examples.php
.obj-swipe {
  z-index: 1;

  &--watercolor {
    @include swipe($type: "watercolor", $direction: "right");
    padding-bottom: rem(100px);

    &-left {
      @include swipe($type: "watercolor", $direction: "left");
      padding-bottom: rem(100px);
    }
  }

  &--blue {
    @include swipe($type: "blue", $direction: "right");
    padding-bottom: rem(100px);

    h2,
    p,
    .obj-swipe__intro {
      color: $color-white;
    }

    &-left {
      @include swipe($type: "blue", $direction: "left");
      padding-bottom: rem(100px);
    }
  }

  &--white {
    @include swipe($type: "white", $direction: "right");
    padding-bottom: rem(100px);

    &-left {
      @include swipe($type: "white", $direction: "left");
      padding-bottom: rem(100px);
    }
  }
}

/// Gradient overlay
@mixin gradient-overlay {
  &::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba($color-white, 0) 0%, rgba($color-white, 0) 45%, $color-black 100%);
    content: '';
  }
}

/// Watercolor background texture
@mixin watercolor-background($isFullWidth: false) {
  position: relative;

  &::before {
    content: '';
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-image: url('../../assets/img/watercolor.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    @if ($isFullWidth ==true) {
      width: 100vw;
    }

    @else {
      width: 100%;
    }
  }
}

/// Placeholder mixin
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }

  &:-moz-placeholder {
    @content
  }

  &::-moz-placeholder {
    @content
  }

  &:-ms-input-placeholder {
    @content
  }
}

/// CTA mixin
@mixin cta {
  margin: 1.5rem 0 0;

  a {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: $color-black;
    color: $color-white;
  }
}

/// Hover mixins
@mixin hover-body-link($color: $color-blue-dark) {
  color: $color;
  text-decoration: solid underline $color 1px;
  text-underline-offset: 2px;
  transition: 0.1s color, 0.1s text-decoration-color;

  &:hover {
    text-decoration-color: transparent;

    @if ($color ==$color-blue-dark) {
      color: $color-black;
    }

    @else if ($color ==$color-black) {
      color: $color-blue-dark;
    }
  }
}

/// Focus mixins
@mixin focus-dark($offset: 4px) {
  &:focus-visible {
    outline: solid 1px $color-black;
    outline-offset: $offset;
  }
}

@mixin focus-light($offset: 4px) {
  &:focus-visible {
    outline: solid 1px $color-white;
    outline-offset: $offset;
  }
}

/// Typography mixins
@mixin hero {
  font-family: $font-roboto-slab;
  font-size: rem(55px);
  line-height: 0.9;
  font-weight: 400;

  @media screen and (min-width: $break-medium) {
    font-size: rem(80px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(120px);
  }
}

@mixin hero-eyebrow {
  font-family: $font-roboto-condensed;
  font-size: rem(18px);
  line-height: 1.05;
  font-weight: 900;

  @media screen and (min-width: $break-medium) {
    font-size: rem(22px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(32px);
  }
}

@mixin h1 {
  font-family: $font-roboto-condensed;
  font-size: rem(42px);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;

  @media screen and (min-width: $break-medium) {
    font-size: rem(60px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(100px);
  }
}

@mixin h1-small {
  font-family: $font-roboto-condensed;
  font-size: rem(34px);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;

  @media screen and (min-width: $break-medium) {
    font-size: rem(56px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(75px);
  }
}

@mixin h1-slab {
  font-family: $font-roboto-slab;
  font-size: rem(38px);
  line-height: 1.05;
  font-weight: 400;
  text-transform: none;

  @media screen and (min-width: $break-medium) {
    font-size: rem(60px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(100px);
  }
}

@mixin h2 {
  font-family: $font-roboto-condensed;
  font-size: rem(34px);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;

  @media screen and (min-width: $break-medium) {
    font-size: rem(52px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(75px);
  }
}

@mixin h3 {
  font-family: $font-roboto-slab;
  font-size: rem(30px);
  line-height: 1.05;
  font-weight: 400;

  @media screen and (min-width: $break-medium) {
    font-size: rem(48px);
    line-height: 0.95;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(70px);
    line-height: 1.1;
  }
}

@mixin h4 {
  font-family: $font-roboto-slab;
  font-size: rem(28px);
  line-height: 1.05;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(35px);
    line-height: 0.95;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(36px);
    line-height: 1.15;
  }
}

@mixin h5 {
  font-family: $font-roboto-slab;
  font-size: rem(24px);
  line-height: 1.25;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(28px);
    line-height: 0.95;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(32px);
    line-height: 1.2;
  }
}

@mixin h6 {
  font-family: $font-roboto-slab;
  font-size: rem(20px);
  line-height: 1.35;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(22px);
    line-height: 1.05;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(25px);
    line-height: 1.2;
  }
}

@mixin body($isBold: false) {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1.5;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
  }

  @if ($isBold) {
    font-weight: 900;

    @media screen and (min-width: $break-large) {
      line-height: 1.2;
    }
  }

  @else {
    font-weight: 400;
  }
}

@mixin body-small {
  font-family: $font-dm-sans;
  font-size: rem(14px);
  line-height: 1.5;
  font-weight: 400;

  @media screen and (min-width: $break-large) {
    font-size: rem(16px);
  }
}

@mixin body-large($isExtraLarge) {
  @if ($isExtraLarge) {
    font-family: $font-roboto-slab;
    font-size: rem(25px);
    line-height: 1.2;
    font-weight: 300;

    @media screen and (min-width: $break-medium) {
      font-size: rem(32px);
    }

    @media screen and (min-width: $break-large) {
      font-size: rem(38px);
    }
  }

  @else {
    font-family: $font-dm-sans;
    font-size: rem(18px);
    line-height: 1.2;
    font-weight: 400;

    @media screen and (min-width: $break-medium) {
      line-height: 1.5;
    }

    @media screen and (min-width: $break-large) {
      font-size: rem(24px);
      line-height: 1.2;
    }
  }
}

@mixin body-link {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1.5;
  font-weight: 700;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
    line-height: 1.2;
  }
}

@mixin body-list {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1.5;
  font-weight: 400;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
  }
}

@mixin primary-cta {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
  }
}

@mixin secondary-cta {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1;
  font-weight: 700;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
  }
}

@mixin quote($isSmall: false) {
  font-family: $font-roboto-slab;
  font-size: rem(22px);
  line-height: 1.3;
  font-weight: 400;

  @media screen and (min-width: $break-medium) {
    font-size: rem(28px);
  }

  @if ($isSmall) {
    @media screen and (min-width: $break-large) {
      font-size: rem(35px);
    }
  }

  @else {
    @media screen and (min-width: $break-large) {
      font-size: rem(40px);
    }
  }
}

@mixin news-card {
  font-family: $font-roboto-slab;
  font-size: rem(18px);
  line-height: 1.15;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(20px);
  }
}

@mixin large-news {
  font-family: $font-roboto-slab;
  font-size: rem(18px);
  line-height: 1.15;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(25px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(26px);
    line-height: 1.35;
  }
}

@mixin event-card {
  font-family: $font-roboto-slab;
  font-size: rem(18px);
  line-height: 1.15;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(22px);
    line-height: 1.35;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(26px);
  }
}

@mixin event-home {
  font-family: $font-roboto-slab;
  font-size: rem(20px);
  line-height: 1.35;
  font-weight: 500;

  @media screen and (min-width: $break-large) {
    font-size: rem(26px);
  }
}

@mixin date-number {
  font-family: $font-roboto-slab;
  font-size: rem(55px);
  line-height: 0.9;
  font-weight: 400;

  @media screen and (min-width: $break-medium) {
    font-size: rem(50px);
    line-height: 1.15;
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(70px);
  }
}

@mixin program-chip-card($isLarge: false) {
  font-family: $font-dm-sans;
  line-height: 1.5;
  font-weight: 900;

  @if ($isLarge) {
    font-size: rem(18px);

    @media screen and (min-width: $break-large) {
      font-size: rem(24px);
    }
  }

  @else {
    font-size: rem(12px);

    @media screen and (min-width: $break-large) {
      font-size: rem(16px);
    }
  }
}

@mixin program-card {
  font-family: $font-roboto-slab;
  font-size: rem(20px);
  line-height: 1.15;
  font-weight: 500;

  @media screen and (min-width: $break-large) {
    font-size: rem(25px);
  }
}

@mixin faculty-name {
  font-family: $font-roboto-slab;
  font-size: rem(22px);
  line-height: 1.35;
  font-weight: 500;

  @media screen and (min-width: $break-medium) {
    font-size: rem(24px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(26px);
  }
}

@mixin accordion {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1.4;
  font-weight: 700;

  @media screen and (min-width: $break-medium) {
    font-size: rem(18px);
  }

  @media screen and (min-width: $break-large) {
    font-size: rem(20px);
  }
}

@mixin section-menu-parent-page {
  font-family: $font-dm-sans;
  font-size: rem(16px);
  line-height: 1.5;
  font-weight: 900;
}

@mixin section-menu-current-page {
  font-family: $font-dm-sans;
  font-size: rem(14px);
  line-height: 1.2;
  font-weight: 700;

  @media screen and (min-width: $break-large) {
    font-size: rem(16px);
  }
}

@mixin section-menu-items {
  font-family: $font-dm-sans;
  font-size: rem(14px);
  line-height: 1.2;
  font-weight: 700;

  @media screen and (min-width: $break-large) {
    font-size: rem(16px);
  }
}

@mixin breadcrumb-linked {
  font-family: $font-dm-sans;
  font-size: rem(14px);
  line-height: 1.5;
  font-weight: 700;
}

@mixin header-menu-item {
  font-family: $font-dm-sans;
  font-size: rem(20px);
  line-height: 1.2;
  font-weight: 900;

  @media screen and (min-width: $break-large) {
    font-weight: 800;
  }
}

@mixin secondary-menu-item {
  font-family: $font-dm-sans;
  font-size: rem(12px);
  line-height: 1.2;
  font-weight: 500;
}

@mixin arrowCircle($sm: 25px, $md: 30px, $lg: 35px, $makeEntireCardClickable: false) {
  text-decoration: none;

  &:hover {
    .last-word {
      gap: 15px;
      padding-right: 0;
    }
  }

  .last-word {
    display: inline-flex;
    align-items: center;
    gap: rem(11px);
    padding-right: 5px;
    transition: 0.1s gap;

    span {
      display: inline-block;
      width: rem($sm);
      height: rem(calc($sm + 1px));
      background-image: url('../../assets/icons/after-arrow-yellow.svg');
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;

      @media screen and (min-width: $break-medium) {
        width: rem($md);
        height: rem(calc($md + 1px));
      }

      @media screen and (min-width: $break-large) {
        width: rem($lg);
        height: rem(calc($lg + 1px));
      }
    }
  }

  @if ($makeEntireCardClickable) {

    // remember to add position: relative to the outermost card wrapper
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
}

@mixin ctaButton($darkBG: false) {
  @include primary-cta();
  display: inline-block;
  padding: rem(12px) rem(16px);
  border: 1px solid $color-gold;
  color: $color-black;
  border-radius: rem(40px);
  background-color: $color-gold;
  text-decoration: none;
  transition: 0.1s color, 0.1s background-color, 0.1s border-color;

  @media screen and (min-width: $break-large) {
    padding: rem(14px) rem(21px);
    border-radius: rem(30px);
  }

  &:hover {
    border: 1px solid $color-black;
    background-color: transparent;

    @if ($darkBG) {
      color: $color-white;
      border: 1px solid $color-white;
    }
  }
}

@mixin ctaLink() {
  @include arrowCircle(25px, 25px, 30px);
  @include secondary-cta();
  position: relative;
  display: inline-block;
  border: 1px solid $color-black;
  padding: rem(12px) rem(47px) rem(12px) rem(20px);
  color: $color-black;
  border-radius: rem(40px);
  background-color: transparent;
  transition: 0.1s color, 0.1s background-color, 0.1s border-color;

  @media screen and (min-width: $break-medium) {
    padding: rem(12px) rem(45px) rem(12px) rem(20px);
  }

  @media screen and (min-width: $break-large) {
    padding: rem(14px) rem(55px) rem(14px) rem(20px);
    border-radius: rem(30px);
  }

  &:hover {
    border: 1px solid $color-gold;
    background-color: $color-gold;
  }

  .last-word span {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    @media screen and (min-width: $break-large) {
      right: 16px;
    }
  }
}

@mixin cardArrowCornerHover() {

  &.js-safari {
    &,
    .background-wrapper {
      border-radius: rem(15px);
    }

    svg.icon {
      bottom: rem(10px);
      right: rem(10px);
    }
  }

  &:hover {
    .card-arrow-corner {
      .background {
        &-wrapper {
          &--img img {
            transform: scale(1.1);
          }
        }
      }

      .icon {
        circle {
          fill: $color-blue-dark;
        }

        path {
          stroke: $color-white;
        }
      }
    }
  }
}