import styled from "styled-components";

interface StyledSkeletonProps {
    width: number;
    height: number;
    borderRadius: string;
}

export const StyledSkeleton = styled.div<StyledSkeletonProps>`
    position: relative;
    overflow: hidden;
    width: ${pr => pr.width}px;
    height: ${pr => pr.height}px;
    background-color: #e8e8e8;
    border-radius: ${pr => pr.borderRadius};

    &:before {
        content: '';
        display: block;
        position: absolute;
        left: -${pr => pr.width}px;
        top: 0;
        height: ${pr => pr.height}px;
        width: ${pr => pr.width}px;
        background-color: #cccccc;
        animation: load 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
        animation-iteration-count: infinite;
    }

    @keyframes load {
        from {
            left: -${pr => pr.width}px;
        }
        to {
            left: 100%;
        }
    }
`;