@keyframes fade {
  0% {
    @apply opacity-0;
  }

  100% {
    @apply opacity-100;
  }
}

.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity;
}

.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}

.slide-enter-active,
.slide-leave-active {
  @apply transition;
  @apply duration-300;
}

.slide-enter-from,
.slide-leave-to {
  @apply transform;
  @apply translate-x-full;
}

.bounce-enter-active,
.bounce-leave-active {
  @apply transition;
}

.bounce-enter-from,
.bounce-leave-to {
  @apply transform;
  @apply scale-95;
}

.svg-icons {
  @apply flex-shrink-0;
  @apply overflow-hidden;
  height: var(--line-height-body);
  width: var(--line-height-body);
}

a {
  @apply inline-flex;
  @apply text-current;
  @apply no-underline;
  @apply transition;
  @apply leading-body;
  @apply focus:outline-none;

  &.link {
    @apply items-center;
    @apply py-0.5 px-1;
    @apply -my-0.5 -mx-1;
    @apply text-accent;
    @apply rounded;
    @apply hover:text-accentDark;
    @apply focus-visible:ring;
    @apply focus-visible:ring-accent;
    @apply focus-visible:text-accentDark;
  }
}

[data-v-tippy] {
  @apply flex flex-1;
}

[interactive] > div {
  @apply flex flex-1;
  @apply h-full;
}

hr {
  @apply border-b border-dividerLight;
  @apply my-2;
}

.heading {
  @apply font-bold;
  @apply text-secondaryDark text-lg;
  @apply tracking-tight;
}

.input,
.select,
.textarea {
  @apply flex;
  @apply w-full;
  @apply py-2 px-4;
  @apply bg-transparent;
  @apply rounded;
  @apply text-secondaryDark;
  @apply border border-divider;
  @apply focus-visible:border-dividerDark;
}

.shortcut-key {
  @apply inline-flex;
  @apply font-sans;
  @apply text-tiny;
  @apply bg-divider;
  @apply rounded;
  @apply ml-2;
  @apply px-1;
  @apply min-w-5;
  @apply min-h-5;
  @apply items-center;
  @apply justify-center;
  @apply border border-dividerDark;
  @apply shadow-sm;
  @apply <sm:hidden;
}