@import "tailwindcss";
@import "../styles/sweetalert2.css";
@import "../styles/font.css";
@import "../styles/animation.css";
@import "../styles/statuses.css";
@import "../styles/app-form.css";
@import "../styles/app-modal.css";
@import "../styles/app-uploader.css";
@import "../styles/app-drawer.css";
@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/typography';

@custom-variant hover (&:hover);
@theme {
  --color-popover: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  --color-destructive-foreground: hsl(210 40% 98%);
  --color-accent: hsl(210 40% 96.1%);
  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  /* --color-destructive: hsl(0 84.2% 60.2%); */
  --color-ring: hsl(222.2 84% 4.9%);
  --color-platinum: #e7e7e7;

  /*
  --primary-light: #fce9e9;
  --primary-pale: #fef8f8;
   */

  --color-primary: #f1a6a6;
  --color-primary-hover: #d4738e1a;
  --color-primary-dark: #e88c8c;
  --color-primary-light: #f8e8ed;
  --color-secondary: #f4b4b4;
  --color-secondary-dark: #e58f8f;
  --color-secondary-light: #fdefef;
  --color-accent: #fdb8b8;
  --color-accent-light: #feedee;
  --color-text-primary: #2d2d30;
  --color-text-secondary: #666;
  --color-success: #04bd5e;
  --color-success-dark: #04bd5e1a;
  --color-success-light: #0f7177;
  --color-success-secondary-light: #d4f5dd;
  --color-success-dark-light: rgba(0, 171, 85, 0.15);
  --color-warning: #e2a03f;
  --color-warning-dark-light: rgba(226, 160, 63, 0.15);
  --color-warning-light: #fff9ed;
  --color-info: #2196f3;
  --color-info-light: #e7f7ff;
  --color-info-dark-light: rgba(33, 150, 243, 0.15);
  --color-orange: #ff8861;
  --color-thirdy: #f8f4f0;
  --color-natural: #f0f0f2;
  --color-secondarydark: #8d8d8d;
  --color-border: #cacaca;
  --color-text: #3e3e3e;
  --color-secondarytext: #848484;
  --color-greynormal: #f7f7f7;
  --color-secgreynormal: #fff5eb;
  --color-error: #ff375e;
  --color-sub: #818c92;
  --color-transparent: "transparent";
  --color-current: "currentColor";

  --animate-spin: spin 1.5s linear infinite;
  --animate-pulseOpacity: pulseOpacity 1.5s infinite;
  --animate-accordion-down: accordion-down 0.2s ease-in;
  --animate-accordion-up: accordion-up 0.2s ease-in;

  --animate-pulse-shadow: pulse-shadow 2s linear infinite alternate;
  --animate-pulse-shadow-sm: pulse-shadow-sm 2s linear infinite alternate;
  --animate-pulseCustom: pulseCustom 2s infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes pulseOpacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes pulseCustom {
    0% {
      box-shadow: 0 0 0 0 #171717;
    }
    70% {
      box-shadow: 0 0 0 20px #9c81571a;
    }
    100% {
      box-shadow: 0 0 0 20px #9c81571a;
    }
  }
  @keyframes pulse-shadow {
    100% {
      box-shadow:
        0 0 0 5px rgba(29, 71, 135, 0.1),
        0 0 0 20px rgba(29, 71, 135, 0.1);
    }
  }

  @keyframes pulse-shadow-sm {
    100% {
      box-shadow:
        0 0 0 5px rgba(29, 71, 135, 0.1),
        0 0 0 10px rgba(29, 71, 135, 0.1);
    }
  }

  --breakpoint-xs: 475px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-xxxl: 1600px;

  --font-Alex: "Alex", sans-serif;

  --shadow-none: "none";
  --shadow-card: "0px 7px 58px 0px #b1b1b11a";
  /* --container-width-lg: 992px;
  --container-width-xl: 1200px;
  --container-width-2xl: 1400px; */
}

/* @utility container {
  @apply max-w-full lg:max-w-[var(--container-width-lg)] xl:max-w-[var(--container-width-xl)] 2xl:max-w-[var(--container-width-xxl)] xl:px-0 px-4 mx-auto;
} */

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 100%;
  @media (min-width: 992px) {
    max-width: 992px;
  }
  @media (min-width: 1200px) {
    max-width: 1200px;
    padding-inline: 0;
  }
  @media (min-width: 1400px) {
    max-width: 1400px;
  }
}
@layer components {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color: #000;
    -webkit-background-clip: text !important;
    background-color: transparent !important;
  }
}

::-webkit-scrollbar {
  @apply w-2;
}
* {
  scroll-behavior: smooth;
}
/* Track */
::-webkit-scrollbar-track {
  @apply bg-primary/50;
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply bg-primary rounded-lg;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  @apply bg-primary;
}

html body {
  @apply font-Alex;
}
/* img {
  -webkit-user-drag: none;
   user-drag: none;
  pointer-events: none;
} */

body.swal2-toast-shown .swal2-container.toast {
  width: 500px !important;
}

.swal2-container .swal2-popup.swal2-toast {
  @apply bg-[#1c2d37] py-2.5 px-6 !text-lg;
}

.swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
  @apply text-white text-lg ps-4;
}
.swal2-container .swal2-popup.swal2-toast.color-primary {
  @apply bg-primary;
}

.swal2-container .swal2-popup.swal2-toast.color-secondary {
  @apply bg-[#1c2d37];
}

.swal2-container .swal2-popup.swal2-toast.color-success {
  @apply bg-success;
}

.ant-input {
  @apply rounded-md border-greynormal transition-all duration-200;

  &:hover,
  &:focus {
    @apply border-primary;
  }
}