// Typography
$font-stack: "Grotesque";

// Border
$border-radius: 12px;

// Animation
$transition-speed-fast: 0.2s;
$easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$easing-cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);

// Media queries
$container-max-width: 1440px;
$gutter: 1.75rem;
$nav-height: 3.81rem;

$tablet-min-width: 768px;
$desktop-min-width: 1025px;

@mixin viewport($media) {
  @if $media == mobile {
    @media only screen and (max-width: $tablet-min-width - 1) {
      @content;
    }
  } @else if $media == mobile-tablet {
    @media only screen and (max-width: $desktop-min-width - 1) {
      @content;
    }
  } @else if $media == tablet {
    @media only screen and (min-width: $tablet-min-width) and (max-width: $desktop-min-width - 1) {
      @content;
    }
  } @else if $media == tablet-desktop {
    @media only screen and (min-width: $tablet-min-width) {
      @content;
    }
  } @else if $media == desktop {
    @media only screen and (min-width: $desktop-min-width) {
      @content;
    }
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  max-width: $container-max-width;
  padding-left: clamp(1rem, 4vw, 6rem);
  padding-right: clamp(1rem, 4vw, 6rem);
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin: 0 auto;
  width: 100%;

  @include viewport(tablet-desktop) {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  &.no-gutter-padding {
    padding-left: 0;
    padding-right: 0;
  }
}

.flex-row {
  display: flex;
  gap: 0.5rem;
}

.text-underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.gray-text {
  color: var(--colour-neutral-500) !important;
}

.green-text {
  color: var(--colour-sosy-green-500);

  &:hover {
    color: var(--colour-sosy-green-600);
  }
}

.white-text {
  color: var(--colour-neutral-100) !important;

  &:hover {
    color: var(--colour-neutral-200);
  }
}

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

.icon-text-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  &.instructor {
    overflow: hidden;
    // font-size: 0.9rem;
  }
}

.center {
  display: flex;
  width: 100%;
  height: 15vw;
  justify-content: center;
  align-items: center;
}

.loading-spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75%;
}

@include viewport(mobile) {
  .mobile-hide {
    display: none;
  }
}

html,
:root {
  background-color: var(--colour-neutral-1200);
}

main {
  // ensures footer sticks on bottom if not enough main content
  flex: 1;
}
