import styled from "styled-components";
import { classes, tokens } from "../../Carousel.tokens";
export const Wrapper = styled.div.withConfig({
    displayName: "Dots.styles__Wrapper",
    componentId: "sc-bbdf6861-0"
})([
    `display:flex;align-items:center;justify-content:center;margin-top:0.75rem;--duration:0.3s;--half-duration:0.15s;`
]);
export const TransitionWrapper = styled.div.withConfig({
    displayName: "Dots.styles__TransitionWrapper",
    componentId: "sc-bbdf6861-1"
})([
    `position:relative;display:flex;transition:transform 0s ease;&.`,
    `{transition:transform var(--duration) ease;}& .`,
    `{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(`,
    `);border-radius:100%;&.`,
    `{background-color:var(`,
    `);}@keyframes fadeOut{from{transform:scale(0.75);opacity:1;}to{transform:scale(0);opacity:0;}}&.`,
    `{animation:fadeOut var(--half-duration) ease forwards;}@keyframes shrinking{from{transform:scale(1);}to{transform:scale(0.75);}}&.`,
    `{animation:shrinking var(--half-duration) var(--half-duration) ease forwards;}}`
], classes.animating, classes.dot, tokens.paginationDotBackground, classes.active, tokens.paginationDotActiveBackground, classes.animateOut, classes.shrinking);
export const DotWrapper = styled.div.withConfig({
    displayName: "Dots.styles__DotWrapper",
    componentId: "sc-bbdf6861-2"
})([
    `display:flex;&.`,
    `{.`,
    `:not(.`,
    `):first-child{transform:scale(0.75);}}&.`,
    `{.`,
    `:not(.`,
    `):last-child{transform:scale(0.75);}}&.`,
    ` .`,
    `{transition:background-color var(--duration) ease;}`
], classes.availableDotsLeft, classes.dot, classes.temporaryNatural, classes.availableDotsRight, classes.dot, classes.temporaryNatural, classes.animating, classes.dot);
export const LeftAnimationWrapper = styled.div.withConfig({
    displayName: "Dots.styles__LeftAnimationWrapper",
    componentId: "sc-bbdf6861-3"
})([
    `position:absolute;top:0;right:100%;bottom:0;display:flex;& .`,
    `{transition:transform var(--duration) ease;@keyframes fadeIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}&.`,
    `{animation:fadeIn var(--half-duration) ease forwards;}&:first-child{@keyframes fadeInFirst{from{transform:scale(0);opacity:0;}to{transform:scale(0.75);opacity:1;}}&.`,
    `{animation:fadeInFirst var(--half-duration) ease forwards;}}}`
], classes.dot, classes.animateIn, classes.animateIn);
export const RightAnimationWrapper = styled.div.withConfig({
    displayName: "Dots.styles__RightAnimationWrapper",
    componentId: "sc-bbdf6861-4"
})([
    `position:absolute;top:0;left:100%;bottom:0;display:flex;& .`,
    `{transition:transform var(--duration) ease;@keyframes fadeIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}&.`,
    `{animation:fadeIn var(--half-duration) ease forwards;}&:last-child{@keyframes fadeInLast{from{transform:scale(0);opacity:0;}to{transform:scale(0.75);opacity:1;}}&.`,
    `{animation:fadeInLast var(--half-duration) ease forwards;}}}`
], classes.dot, classes.animateIn, classes.animateIn);
