@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: $purple-dark;
    background-image: -webkit-linear-gradient(
      45deg,
      $bg-white 25%,
      transparent 25%,
      transparent 50%,
      $bg-white 50%,
      $bg-white 75%,
      transparent 75%,
      transparent
    );
  }
}

@mixin pc-layout {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin sp-layout {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin cursor {
  cursor: url('../assets/cursor/cursor.png'), auto !important;
}

@mixin cursor-link {
  cursor: url('../assets/cursor/cursor_link.png'), auto !important;
}

@mixin link {
  position: relative;
  color: $link-color;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: $link-color;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
  }
  &:hover {
    &::after {
      transform-origin: bottom left;
      transform: scaleX(1);
    }

    &::before {
      opacity: 1;
      transform: scale(1) translateY(-100%);
    }
  }

  &:before {
    content: '\e809  'attr(href);
    position: absolute;
    padding: 0px 4px;
    width: max-content;
    pointer-events: none;
    font-family: 'Fontello';
    font-size: $font-size-small;
    box-shadow: $card-shadow-light;
    border-radius: 3px;
    background-color: white;
    opacity: 0;
    transform: scale(0.7) translateY(-75%);
    transform-origin: left center;
    transition: all 0.3s ease 0s;
  }
}

@mixin clip {
  color: white;
  text-transform: capitalize;
  background-image: linear-gradient(to right, $text-clip-start 10%, $text-clip-center 40%, $text-clip-end 70%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: textclip 3s linear infinite;
}

@mixin card {
  border-radius: 3px;
  background-color: $bg-white-deep;
  @include pc-layout {
    box-shadow: $card-shadow;
  }
  @include sp-layout {
    box-shadow: $card-shadow-light;
  }
}

@mixin card-light {
  border-radius: 3px;
  background-color: $bg-white-dim;
  box-shadow: $card-shadow-light;
  transition: $transition-base;
  @include pc-layout {
    &:hover {
      transform: translateY(-4px);
      box-shadow: $card-shadow-light-hover;
    }
  }
}

@mixin card-page {
  border-radius: 3px;
  @include pc-layout {
    background-color: $bg-white-dim;
    box-shadow: $card-shadow;
  }
}
