@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* FONTS */
.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.poppins {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.poppins-heavy {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.raleway-light {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.raleway {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.raleway-bold {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.raleway-heavy {
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-style: normal;
}


@keyframes swipe-out-left {
    0% {
        transform: var(--y) translate(var(--swipe-amount-x));
        opacity: 1
    }
    to {
        transform: var(--y) translate(calc(var(--swipe-amount-x) - 100%));
        opacity: 0
    }
}

@keyframes swipe-out-right {
    0% {
        transform: var(--y) translate(var(--swipe-amount-x));
        opacity: 1
    }
    to {
        transform: var(--y) translate(calc(var(--swipe-amount-x) + 100%));
        opacity: 0
    }
}

@keyframes swipe-out-up {
    0% {
        transform: var(--y) translateY(var(--swipe-amount-y));
        opacity: 1
    }
    to {
        transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
        opacity: 0
    }
}

@keyframes swipe-out-down {
    0% {
        transform: var(--y) translateY(var(--swipe-amount-y));
        opacity: 1
    }
    to {
        transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
        opacity: 0
    }
}

@media (max-width: 600px) {

}

[data-sonner-toaster][data-theme=light] {
    --normal-bg: #fff;
    --normal-border: var(--gray4);
    --normal-text: var(--gray12);
    --success-bg: hsl(143, 85%, 96%);
    --success-border: hsl(145, 92%, 91%);
    --success-text: hsl(140, 100%, 27%);
    --info-bg: hsl(208, 100%, 97%);
    --info-border: hsl(221, 91%, 91%);
    --info-text: hsl(210, 92%, 45%);
    --warning-bg: hsl(49, 100%, 97%);
    --warning-border: hsl(49, 91%, 91%);
    --warning-text: hsl(31, 92%, 45%);
    --error-bg: hsl(359, 100%, 97%);
    --error-border: hsl(359, 100%, 94%);
    --error-text: hsl(360, 100%, 45%)
}

[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {
    --normal-bg: #000;
    --normal-border: hsl(0, 0%, 20%);
    --normal-text: var(--gray1)
}

[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {
    --normal-bg: #fff;
    --normal-border: var(--gray3);
    --normal-text: var(--gray12)
}

[data-sonner-toaster][data-theme=dark] {
    --normal-bg: #000;
    --normal-bg-hover: hsl(0, 0%, 12%);
    --normal-border: hsl(0, 0%, 20%);
    --normal-border-hover: hsl(0, 0%, 25%);
    --normal-text: var(--gray1);
    --success-bg: hsl(150, 100%, 6%);
    --success-border: hsl(147, 100%, 12%);
    --success-text: hsl(150, 86%, 65%);
    --info-bg: hsl(215, 100%, 6%);
    --info-border: hsl(223, 100%, 12%);
    --info-text: hsl(216, 87%, 65%);
    --warning-bg: hsl(64, 100%, 6%);
    --warning-border: hsl(60, 100%, 12%);
    --warning-text: hsl(46, 87%, 65%);
    --error-bg: hsl(358, 76%, 10%);
    --error-border: hsl(357, 89%, 16%);
    --error-text: hsl(358, 100%, 81%)
}

.theme-switch svg:last-child, #menu-switch svg:last-child{
    display: none;
}
.dark .theme-switch svg:first-child, #menu-switch.is-open svg:first-child{
    display: none;
}
.dark .theme-switch svg:last-child, #menu-switch.is-open svg:last-child{
    display: block;
}
.foreground {
    color: hsl(var(--foreground));
}
.background {
    color: hsl(var(--background));
}


