"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: Object.getOwnPropertyDescriptor(all, name).get
    });
}
_export(exports, {
    get DotWrapper () {
        return DotWrapper;
    },
    get LeftAnimationWrapper () {
        return LeftAnimationWrapper;
    },
    get RightAnimationWrapper () {
        return RightAnimationWrapper;
    },
    get TransitionWrapper () {
        return TransitionWrapper;
    },
    get Wrapper () {
        return Wrapper;
    }
});
const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
const _Carouseltokens = require("../../Carousel.tokens");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const Wrapper = _styledcomponents.default.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;`
]);
const TransitionWrapper = _styledcomponents.default.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;}}`
], _Carouseltokens.classes.animating, _Carouseltokens.classes.dot, _Carouseltokens.tokens.paginationDotBackground, _Carouseltokens.classes.active, _Carouseltokens.tokens.paginationDotActiveBackground, _Carouseltokens.classes.animateOut, _Carouseltokens.classes.shrinking);
const DotWrapper = _styledcomponents.default.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;}`
], _Carouseltokens.classes.availableDotsLeft, _Carouseltokens.classes.dot, _Carouseltokens.classes.temporaryNatural, _Carouseltokens.classes.availableDotsRight, _Carouseltokens.classes.dot, _Carouseltokens.classes.temporaryNatural, _Carouseltokens.classes.animating, _Carouseltokens.classes.dot);
const LeftAnimationWrapper = _styledcomponents.default.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;}}}`
], _Carouseltokens.classes.dot, _Carouseltokens.classes.animateIn, _Carouseltokens.classes.animateIn);
const RightAnimationWrapper = _styledcomponents.default.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;}}}`
], _Carouseltokens.classes.dot, _Carouseltokens.classes.animateIn, _Carouseltokens.classes.animateIn);
