// All mixins go here!
@use './global-variables' as *;
@use '../themes/colors/color-variables' as *;
@use './functions' as *;
// @use '../themes/colors/colors.scss' as *;

// centering mixins
@mixin center-with-margin {
  margin: 0px auto;
}

.center-with-margin {
  @include center-with-margin;
}

@mixin center-with-grid {
  display: grid;
  place-items: center;
}
.center-with-grid {
  @include center-with-grid;
}

@mixin center-with-flex {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

.center-with-flex {
  @include center-with-flex;
}

// overlay mixin
@mixin overlay($offset: 0) {
  bottom: $offset;
  left: $offset;
  position: absolute;
  right: $offset;
  top: $offset;
}
.is-overlay {
  @include overlay;
}

// scroll mixin
@mixin scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;

  /**
 * Customized scrollbar // get a better one!
 */

  &::-webkit-scrollbar {
    width: 12px;
    height: 6px;
    background-color: #eff1f5; // scrollbar track color
  }

  &::-webkit-scrollbar-track {
    border-radius: $serato-border-radius;
    background-color: $transparent-color;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $serato-border-radius;
    height: 6px;
    background-color: #9ca3af; // scrollbar hover color
    border: 2px solid #eff1f5; // scrollbar track color

    &:hover {
      background-color: #bbc5d4; // scrollbar hover color
    }
  }
}

// selection disabled mixin
@mixin selection-disabled {
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

// ultimate gradient generating mixin
@mixin gradient-generator($gradient-name, $first-color, $second-color) {
  // basic linear gradient
  .#{$gradient-name}-gradient-on-background {
    background: linear-gradient(to right, $first-color, $second-color);
    // linear gradient with directions
    @each $direction in $serato-directions {
      &-to-#{$direction} {
        background: linear-gradient(
          to #{$direction},
          $first-color,
          $second-color
        );
      }
    }
    // radial-gradient
    &-radial {
      background: radial-gradient(
        ellipse at center,
        $first-color 0%,
        $second-color 100%
      );
    }
  }
  // basic linear text gradient
  .#{$gradient-name}-gradient-on-text {
    background: linear-gradient(to right, $first-color, $second-color);
    background-clip: text;
    user-select: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    // text radial-gradient
    &-radial {
      background: radial-gradient(
        ellipse at center,
        $first-color 0%,
        $second-color 100%
      );
      user-select: none;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

// border gradient mixin
@mixin border-gradient($alignment, $breadth: 2px, $gradient) {
  border-#{$alignment}: $breadth solid;
  border-image: $gradient 3;
}

// text gradient mixin
@mixin text-gradient($grad) {
  background: $grad;
  user-select: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// glass-morphism generating mixin eg. background-glass-gray-500
@mixin make-blur($name, $blur-color) {
  .background-glass-#{$name} {
    background: rgba($blur-color, 0.2);
    backdrop-filter: blur(40px);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .background-glass-#{$name}--hoverable {
    background: rgba($blur-color, 0.2);
    backdrop-filter: blur(40px);
    border: 2px solid transparent;
    background-clip: padding-box;

    &:hover {
      transition: $transition-smooth;
      background: rgba($blur-color, 0.35);
    }
  }
  // glass effect for text eg. color-glass-black--hoverable
  .color-glass-#{$name} {
    color: transparent;
    user-select: none;
    background-clip: text;
    backdrop-filter: blur(40px);
    background: rgba($blur-color, 0.2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .color-glass-#{$name}--hoverable {
    color: transparent;
    user-select: none;
    background-clip: text;
    backdrop-filter: blur(40px);
    background: rgba($blur-color, 0.2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    &:hover {
      transition: $transition-smooth;
      color: transparent;
      user-select: none;
      background-clip: text;
      backdrop-filter: blur(40px);
      background: rgba($blur-color, 0.35);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

// text shimmer effect //
@mixin text-shimmer($text-bg, $text-color) {
  padding: 0 140px 0 0 !important;
  color: rgba($text-color, 0.801);
  background-color: $text-bg;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from($text-bg),
    to($text-bg),
    color-stop(0.5, $text-color)
  );
  background: -moz-gradient(
    linear,
    left top,
    right top,
    from($text-bg),
    to($text-bg),
    color-stop(0.5, $text-color)
  );
  background: gradient(
    linear,
    left top,
    right top,
    from($text-bg),
    to($text-bg),
    color-stop(0.5, $text-color)
  );
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: text-shimmer;
  -moz-animation-name: text-shimmer;
  animation-name: text-shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;

  @-moz-keyframes text-shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @-webkit-keyframes text-shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @-o-keyframes text-shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
  @keyframes text-shimmer {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top right;
    }
  }
}

// space-on-hover mixin
@mixin space-on-hover {
  width: $width-content;
  will-change: auto;

  &:hover {
    transition: margin 0.35s ease;
    margin-bottom: 1rem;
  }
}

@mixin polaroid {
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 0;
  position: relative;

  &:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 10;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
  }
}

@mixin ghosty {
  animation: ghosty 12s ease-in 1s;
  -webkit-animation: ghosty 12s ease-in 1s;

  @keyframes ghosty {
    0% {
      opacity: 0.1;
    }
    6% {
      opacity: 0.2;
    }
    12% {
      opacity: 0.3;
    }
    18% {
      opacity: 0.4;
    }
    24% {
      opacity: 0.6;
    }
    30% {
      opacity: 0.7;
    }
    36% {
      opacity: 0.8;
    }
    90% {
      opacity: 0.9;
    }
    100% {
      opacity: 1;
    }
  }
}

/* A mega hover state color & background color generator mixin */
@mixin make-hoverable($name, $hoverable-color) {
  // add color to element on-hover eg. color-gray-400-on-hover
  .color-#{$name}-on-hover:hover {
    transition: $transition-colors;
    color: $hoverable-color !important;
  }
  // add background color to element on-hover eg. background-gray-400-on-hover
  .background-#{$name}-on-hover:hover {
    transition: $transition-colors;
    background-color: $hoverable-color !important;
  }

  // make a color hoverable when asigned a hoverable modifier eg. color-green--hoverable
  .color-#{$name}--hoverable {
    color: $hoverable-color !important;

    &:hover {
      transition: $transition-colors;
      color: color-modifier($hoverable-color) !important;
    }
  }
  // make a background color hoverable when asigned a hoverable modifier eg. background-green--hoverable
  .background-#{$name}--hoverable {
    background-color: $hoverable-color !important;

    &:hover {
      transition: $transition-colors;
      background-color: color-modifier($hoverable-color) !important;
    }
  }
}