import { Box } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../../themes";

export const UserReviewsSkeletonContainer = styled(Box)`
    width: 100%;
`
export const UserReviewsSkeletonItemsContainer = styled(Box)`
    width: 100%;
    padding: 36px;
`
export const UserReviewsSkeletonLine = styled(Box)`
    display: flex;
    flex-direction: row;
    & * {
        background-color: ${selectedTheme.skeletonItemColor};
    }
`
export const UserReviewsSkeletonCircle = styled(Box)`
    width: 54px;
    height: 54px;
    border-radius: 100%;
`
export const UserReviewsSkeletonLineOne = styled(Box)`
    width: 78px;
    height: 18px;
    margin-top: 18px;
    margin-left: 18px;
`
export const UserReviewsSkeletonLineSecond = styled(Box)`
    width: 200px;
    height: 14px;
    margin-top: 18px;
    margin-left: 9px;
    margin-bottom: 4px;
    flex: 1;
`
export const UserReviewsSkeletonSquare = styled(Box)`
    width: 14px;
    height: 14px;
    margin-top: 18px;
`
export const UserReviewsSkeletonLineThird = styled(Box)`
    width: 91px;
    height: 14px;
    margin-left: 23px;
`
export const UserReviewsSkeletonLineForth = styled(Box)`
    width: 154px;
    height: 14px;
    margin-top: 20px;
    margin-bottom: 4px;
`
export const UserReviewsSkeletonLineFifth = styled(Box)`
    width: 121px;
    height: 14px;
`