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

/* Fonts */
@import "./fonts/fonts.css";

/* Components */
@import "./styles/Breadcrumbs.css";
@import "./styles/Card.css";
@import "./styles/CardContainer.css";
@import "./styles/Carousel.css";
@import "./styles/ContentBlock.css";
@import "./styles/ContentBlockContainer.css";
@import "./styles/CTAContainer.css";
@import "./styles/CTASection.css";
@import "./styles/EmbedContainer.css";
@import "./styles/EmbedVideo.css";
@import "./styles/FooterContainer.css";
@import "./styles/HeaderContainer.css";
@import "./styles/HeroDefaultContainer.css";
@import "./styles/HeroHomeContainer.css";
@import "./styles/ContainerLeadCta.css";
@import "./styles/HeroLargeContainer.css";
@import "./styles/HeroProductDetailContainer.css";
@import "./styles/LanguagePicker.css";
@import "./styles/NavCollapsible.css";
@import "./styles/NavDropdown.css";
@import "./styles/OffCanvas.css";
@import "./styles/PumpCalc.css";
@import "./styles/ProductSpecTable.css";
@import "./styles/PoolCalc.css";
@import "./styles/SearchBar.css";
@import "./styles/SearchResultsContainer.css";
@import "./styles/SocialMedia.css";
@import "./styles/CTAButton.css";
@import "./styles/CTASubmitButton.css";

:root {
    --resource: #ec5a25;
    --article: #0099a8;
    --product: #00a5e7;
    --default: #212e52;
    --resource-50: rgba(236, 90, 37, 0.5);
    --article-50: rgba(0, 153, 168, 0.5);
    --product-50: rgba(0, 165, 231, 0.5);
    --default-50: rgba(33, 46, 82, 0.5);
    --default-70: rgba(33, 46, 82, 0.7);
}

.Contentwrap {
    @apply max-w-contentwrap;
    @apply mx-auto;
    @apply px-3.5;
}

.Contentwrap--no-margin-right {
    max-width: calc(75rem + (100% - 75rem) / 2);
    @apply px-0;
    @apply sm:mr-0;
    @apply sm:pr-0;
    @apply sm:pl-3.5;
}

/* Input darkmode fix for checkbox / radio */
.dark [type="checkbox"]:checked,
.dark [type="radio"]:checked {
    background-color: currentColor;
}

/* CUSTOM ANIMATIONS */

.fade-in {
    animation: fade-in 3s;
}

.fade-in-fast {
    animation: fade-in 0.2s;
}

.fade-out-fast {
    animation: fade-out 0.2s forwards;
}

.grow-left {
    transform-origin: right;
    animation: grow cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.4s forwards;
    animation-delay: 0s;
}

.grow-right {
    transform-origin: left;
    animation: grow cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.4s forwards;
    animation-delay: 0s;
}

.shrink-left {
    transform: scaleX(1);
    transform-origin: right;
    animation: shrink cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.2s forwards;
    animation-delay: 0s;
}

.shrink-right {
    transform: scaleX(1);
    transform-origin: right;
    animation: shrink cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.4s forwards;
    animation-delay: 0s;
}

.slow-grow-right {
    transform: scaleX(0);
    transform-origin: left;
    animation: grow-right cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s forwards;
    animation-delay: 0s;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes grow {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes shrink {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

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

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