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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  @font-face {
    font-family: "quicksand";
    src: url(/fonts/quicksand.ttf) format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "quicksand-fallback";
    src: local("Arial");
    ascent-override: 97%;
    descent-override: 24%;
    line-gap-override: 0%;
    size-adjust: 103%;
  }
}

@keyframes caffe-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

footer {
    position: relative;
    isolation: isolate;
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://s.mimoprati.com.br/mimo_background.svg');
    background-repeat: repeat;
    background-position: center;
    background-size: 280px auto;
    filter: brightness(0);
    opacity: 0.1; 
    z-index: -1;
    pointer-events: none;
}

::selection {
  background-color: #6E2826;
  color: white;
}

.bg-\[\#6E2826\] ::selection,
.bg-\[\#6e2826\] ::selection {
  background-color: #f1e9e9;
  color: #6E2826;
}

details>summary::-webkit-details-marker {
  display: none;
}

.tirar-setinha-dupla select {
  @apply bg-none
}

@keyframes slide-up-then-down {

  0%,
  100% {
    transform: translateY(70px);
    opacity: 0;
  }

  5%,
  95% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.copy-success {
  animation: slide-up-then-down 4s both;
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.flavor-card-selected {
  @apply border-[#6E2826] bg-[#6E2826]/5;
}

.flavor-card-selected .flavor-name {
  @apply text-[#6E2826];
}

.flavor-card-disabled {
  @apply cursor-not-allowed opacity-40;
}

.flavor-qty-btn {
  @apply flex h-8 w-8 items-center justify-center rounded-full border border-stone-300 text-sm font-medium text-stone-600 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)];
}

.flavor-qty-btn:hover:not(:disabled) {
  @apply border-[#6E2826] bg-[#6E2826]/5 text-[#6E2826];
}

.flavor-qty-btn:disabled {
  @apply cursor-not-allowed opacity-30;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */