import styled, {css, keyframes} from 'styled-components';
import {
  gray70,
  gray80,
  spacing,
  fontBigger,
  black,
} from '@propellerads/stylevariables';

const StyledHeader = styled.div`
        color: ${gray70};
        margin-bottom: ${spacing * 2}px;
        display: flex;
        min-height: 18px;
`;

const StyledHeaderTitle = styled.div`
       margin-right: ${spacing}px;
`;

const StyledBody = styled.div`
    margin-top: ${spacing * 2}px;
    font-size: ${fontBigger}px
    line-height: 0.9;
    min-height: 20px;
    color: ${black};
`;

const spin = keyframes`
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
`;

const StyledLoader = styled.div`
    display: none;
    cursor: progress !important;
        position: relative;
        color: transparent;

        &:before {
            content: '';
            position: absolute;
            height: 20px;
            width: 20px;
            border: 3px solid;
            border-color: white ${gray80} ${gray80};
            opacity: 0.7;
            border-radius: 50%;
            animation: ${spin} 0.5s linear infinite;
            margin-left: auto;
            margin-right: auto;
        }

        &:hover {
            color: transparent;
        }

    ${(props) => props.isLoading && css`
        display: block;
    `}
`;

export {
  StyledHeader,
  StyledHeaderTitle,
  StyledBody,
  StyledLoader,
};