$content-width: 800px !default;
$mobile-width: 600px !default;
$pc-width: 800px !default;
$medium-width: 442px !default;
$defualt-width: 1000px !default;

@mixin link($color, $hover-color, $hover-bgcolor) {
    color: $color;
    text-decoration: none;
    @include duration-550;
    @include easing-standard;

    &:hover {
        color: $hover-color;
        background: $hover-bgcolor;
    }
}
@mixin btn {
  @include duration-550;
  @include easing-standard;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 50px;
  left: 40px;
  top: 64px;
  border-radius: 100px;
}

@mixin prompt($bg-color, $color, $icon, $icon-color, $icon-font-family) {
  @include shape-large;
  background-color: $bg-color;
  color: $color;
  padding: 0.8rem 1.2rem;
  &::before {
    content: $icon;
    font-family: $icon-font-family;
    color: $color;
    font-size: 34px;
    line-height: 1;
    padding-right: 10px;
    padding-bottom: 13px;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
  }
}

@mixin horizontal-scroll {
    &::-webkit-scrollbar {
      height: 16px;
    }
  
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  
    &::-webkit-scrollbar-thumb {
      background: rgba(128, 134, 139, 0.2);
      background-clip: padding-box;
      border: 4px solid transparent;
      border-radius: 10px;
      box-sizing: border-box;
  
      &:hover {
        background: rgba(128, 134, 139, 0.4);
        box-sizing: border-box;
        background-clip: padding-box;
      }
    }
}

@mixin elevation1($bg-color) {
  background: linear-gradient(0deg, rgba(208, 188, 255, 0.05), rgba(208, 188, 255, 0.05)), $bg-color;
} 
@mixin elevation2($bg-color) {
  background: linear-gradient(0deg, rgba(208, 188, 255, 0.08), rgba(208, 188, 255, 0.08)), $bg-color;
}  
@mixin elevation3($bg-color) {
  background: linear-gradient(0deg, rgba(208, 188, 255, 0.11), rgba(208, 188, 255, 0.11)), $bg-color;
}  
@mixin elevation4($bg-color) {
  background: linear-gradient(0deg, rgba(208, 188, 255, 0.12), rgba(208, 188, 255, 0.12)), $bg-color;
}  
@mixin elevation5($bg-color) {
  background: linear-gradient(0deg, rgba(208, 188, 255, 0.14), rgba(208, 188, 255, 0.14)), $bg-color;
}

@keyframes Drawer-Entrance {
  from {
    transform: translateX(-1000rem);
    opacity: 0;
  }
  to {
    transform: translateX(0rem);
    opacity: 1;
  }
}
@keyframes Drawer-exit {
  from {
    transform: translateX(0rem);
    opacity: 1;
  }
  to {    
    transform: translateX(-1000rem);
    opacity: 0;

  }
}
@keyframes opacitychange {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes opacityrestore {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes activeanimation {
  from {
    opacity: 0;
    transform: scaleX(0.32);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes wrapper-animation {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}

@keyframes TOC-Entrance {
  from {
    transform: translateY(-1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0rem);
    opacity: 1;
  }
}

@keyframes TOC-Exit {
  from {
    transform: translateY(0rem);
    opacity: 1;
  }
  to {
    transform: translateY(-1rem);
  }
}