n0mbers/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* https://google-webfonts-helper.herokuapp.com/fonts */

/* manrope-regular - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-v8-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/manrope-v8-latin-regular.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('../fonts/manrope-v8-latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('../fonts/manrope-v8-latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('../fonts/manrope-v8-latin-regular.svg#Manrope') format('svg');
  /* Legacy iOS */
}

/* manrope-700 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-v8-latin-700.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/manrope-v8-latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */ url('../fonts/manrope-v8-latin-700.woff')
      format('woff'),
    /* Modern Browsers */ url('../fonts/manrope-v8-latin-700.ttf')
      format('truetype'),
    /* Safari, Android, iOS */ url('../fonts/manrope-v8-latin-700.svg#Manrope')
      format('svg');
  /* Legacy iOS */
}

/* Jetbrains mono - latin */
@font-face {
  font-family: 'Jetbrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2');
}

/* ROUTE TRANSITION */

.route-move,
.route-enter-active,
.route-leave-active {
  transition: all 0.8s ease;
}

.route-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.route-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.route-leave-active {
  position: absolute;
}


/* ROUTE TRANSITION - BACK */

.route_back-move,
.route_back-enter-active,
.route_back-leave-active {
  transition: all 0.8s ease;
}

.route_back-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}

.route_back-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.route_back-leave-active {
  position: absolute;
}


/* SLIDE LEFT */

.slide_left-move,
.slide_left-enter-active,
.slide_left-leave-active {
  transition: all 0.5s ease;
}

.slide_left-enter-from,
.slide_left-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* .slide_left-leave-active {
  position: absolute;
} */

/* SLIDE UP */

.slide_up-enter-active,
.slide_up-leave-active {
  transition: all 0.5s ease;
}

.slide_up-enter-from,
.slide_up-leave-to {
  opacity: 0;
  transform: translateY(60px);
}

/* ZERO HEIGHT */

.zero_height-enter-active,
.zero_height-leave-active {
  transition: all 0.5s ease;
}

.zero_height-enter-from,
.zero_height-leave-to {
  height: 0;
  opacity: 0;
}

@layer utils {
}

@layer components {
  .btn {
    @apply hover:text-cyan-500 dark:text-stone-400 dark:hover:text-cyan-500;
    @apply transition-colors duration-200;
  }
  .btn-border {
    @apply w-fit p-2;
    @apply rounded border border-stone-600 transition-opacity;
    @apply hover:border-cyan-500 hover:text-cyan-500;
    @apply transition-colors duration-200;
  }
  .btn-disabled {
    pointer-events: none;
    opacity: 0.5;
  }
}