import styled from 'styled-components';
import { sizes } from '../../theme/mixins';
import { Button, styleButton } from './Button.style';

export const CookieConsent = styled.div<{ isOpen: boolean }>`
  display: ${props => (props.isOpen ? 'block' : 'none')};
  background-color: ${props => props.theme.default.colors.white};
  color: ${props => props.theme.default.colors.black};
  border-radius: 4px;
  max-width: ${sizes.medium}px;
  margin: 20px;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  animation: slideIn 1s ease-out;
  box-shadow: ${props => props.theme.default.shadow};

  h3 {
    font-size: 1.125rem;
  }

  .icon-close {
    background: none;
    border: none;
    color: ${props => props.theme.default.colors.darkGrey};
    float: right;
  }
  
  .button-close {
    ${styleButton};
  }

  ${Button} {
    max-width: 100%;
  }

  @keyframes slideIn {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }
`;