import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
const defaultProps = {
    width: 'default',
    variant: 'default'
};
const lengthToPercent = {
    default: 'auto',
    l: '80%',
    m: '50%',
    s: '30%'
};
export const StyledLineSkeleton = styled.div(props => {
    const { width, variant } = props;
    const { skeleton: skeletonBackground } = props.theme.base.palette;
    const lengthPercent = lengthToPercent[width || 'default'];
    const LinkHeaderColor = 'rgb(135,206,235,0.5)';
    return css `
    flex-grow: 1;
    margin: 0.25rem;
    height: 0.875rem;
    width: ${lengthPercent};
    ${variant === 'default'
        ? `background-color: ${skeletonBackground}`
        : `background-color: ${LinkHeaderColor}`}
  `;
});
StyledLineSkeleton.defaultProps = defaultThemeProp;
const LineSkeleton = (props) => {
    return _jsx(StyledLineSkeleton, { ...props, "aria-disabled": true });
};
LineSkeleton.defaultProps = defaultProps;
export default LineSkeleton;
//# sourceMappingURL=LineSkeleton.js.map