import styled, { css } from "styled-components";
import { applyRoundness, applySkeletonPulseGradient, applySkeletonShimmerGradient } from "../../../mixins";
import { classes, privateTokens, tokens } from "../tokens";
export const base = css([
    `display:flex;align-items:center;width:100%;`
]);
export const StyledVisibleLine = styled.div.withConfig({
    displayName: "LineSkeleton.styles__StyledVisibleLine",
    componentId: "sc-1797f9b-0"
})([
    `position:relative;overflow:hidden;width:100%;`,
    `:`,
    `;`,
    `;&.`,
    `{`,
    `:`,
    `;`,
    `;}&.`,
    `{`,
    `:`,
    `;`,
    `:`,
    `;`,
    `;}`
], privateTokens.lineSkeletonRoundness, ({ roundness })=>roundness, applyRoundness(`var(${privateTokens.lineSkeletonRoundness})`), classes.shimmerAnimation, privateTokens.lineSkeletonGradient, ({ gradientColor })=>gradientColor || `var(${tokens.gradientColor})`, applySkeletonShimmerGradient(`var(${privateTokens.lineSkeletonGradient})`, tokens.shimmerDuration), classes.pulseAnimation, privateTokens.skeletonFadeInColor, ({ customFadeInColor })=>customFadeInColor || `var(${tokens.fadeInColor})`, privateTokens.skeletonFadeOutColor, ({ customFadeOutColor })=>customFadeOutColor || `var(${tokens.fadeOutColor})`, applySkeletonPulseGradient(privateTokens.skeletonFadeInColor, privateTokens.skeletonFadeOutColor, tokens.pulseDuration));
