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

@layer base {
  h1 {
    @apply text-h1 mb-1;
  }
  
  h2 {
    @apply text-h2 mb-1;
  }
  
  h3 {
    @apply text-h3 mb-0.5;
  }
  
  h4 {
    @apply text-h4 mb-0.5;
  }
  
  h1, h2, h3, h4 {
    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
  }
  
  hr {
    @apply h-[1px] w-full border-0 bg-medusa-border-base dark:bg-medusa-border-base-dark my-2;
  }
  
  p, ul, ol {
    @apply mb-1.5;
  }

  html {
    -webkit-font-smoothing: antialiased;
  }

  body {
    @apply overflow-x-hidden;
  }

  *::selection {
    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
  }

  pre *::selection {
    @apply !bg-medusa-code-text-highlight;
  }

  body[data-modal="opened"] {
    @apply !overflow-hidden;
  }

  mark {
    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
    @apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
  }
}

@layer utilities {
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }

  @keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  @-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes bounceOut {
    20% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    50%,
    55% {
      opacity: 1;
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    to {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
  }
  
  @-webkit-keyframes bounceOut {
    20% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    50%,
    55% {
      opacity: 1;
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    to {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
  }
  
  .animate-fadeIn {
    animation: fadeIn 500ms;
  }
  
  .animate-fadeOut {
    animation: fadeOut 300ms;
  }
  
  .animate-bounceIn {
    animation: bounceIn 300ms;
  }
  
  .animate-bounceOut {
    animation: bounceOut 300ms;
  }

  .animate-fill-forwards {
    animation-fill-mode: forwards;
  }

  .animate-fast {
    animation-duration: 300ms;
  }

  .clip {
    clip-path: inset(0);
  }

  .no-marker {
    @apply marker:content-none;
  }

  .no-marker::-webkit-details-marker {
    @apply hidden;
  }
}

@layer components {
  .btn-secondary {
    @apply inline-flex flex-row justify-center items-center;
    @apply py-[5px] px-0.75 rounded-sm cursor-pointer;
    @apply bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark;
    @apply hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline;
    @apply active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark;
    @apply focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark;
    @apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
    @apply disabled:cursor-not-allowed;
    @apply border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
    @apply text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark;
    @apply shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow;
    @apply dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused;
    @apply select-none;
  }

  .btn-secondary-icon {
    @apply !p-0.25;
  }

  .btn-primary {
    @apply inline-flex flex-row justify-center items-center;
    @apply py-[5px] px-0.75 rounded-sm cursor-pointer;
    @apply bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark;
    @apply hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline;
    @apply active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark;
    @apply focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark;
    @apply shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow;
    @apply dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark;
    @apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
    @apply disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark;
    @apply text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark;
    @apply disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark;
    @apply border border-medusa-border-loud dark:border-medusa-border-loud-dark;
    @apply select-none;
  }

  .btn-clear {
    @apply bg-transparent shadow-none border-0 outline-none cursor-pointer;
  }
}

@import url('./tooltip.css');