text: import styled, {css} from 'styled-components';
  import {colors,fontSize, fontWeight,lineHeight} from '../../../helpers';
  
  /*
  ===============================
  Funkcja obsługujące rozmiary 
  czcionek na sekcji  rejestracji
  ===============================
  */
  const textStyles =  css`
          font-size: ${({Size}) => 
                  Size ==="isHuge" && fontSize.huge  ||
                  Size === "isExtraBig" &&fontSize.extra_big || 
                  Size === "isBig" && fontSize.big || 
                  Size === "isExtraNormal" &&  fontSize.extra_normal || 
                  Size === "isNormal" && fontSize.normal || 
                  Size === "isSmall" &&  fontSize.small || 
                  Size === "isExtraSmall" &&  fontSize.extra_small || 
                  fontSize.huge };
  
          font-weight: ${({isBold}) => isBold ?  fontWeight.bold :  fontWeight.normal };
          
          line-height:${({Size}) => 
                  Size ==="isHuge" &&  lineHeight.huge ||
                  Size === "isExtraBig" &&  lineHeight.extra_big || 
                  Size === "isBig" && lineHeight.big || 
                  Size === "isExtraNormal" &&  lineHeight.extra_normal || 
                  Size === "isNormal" &&  lineHeight.normal || 
                  Size === "isSmall" & lineHeight.small || 
                  Size === "isExtraSmall" &&  lineHeight.extra_small || 
                 lineHeight.huge };
          text-align: ${props =>props.position};
  `;
  
  /*
  =================================
  Spis stworzonych komponentów wraz z 
  zawartymi stylami dla  sekcji  rejestracji
  =================================
  */
  export const Inner = styled.div`
          display: block;
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%,-50%);
  `;
  
  export const Panel = styled.div`
          padding:2rem;
          width:35rem;
          min-height:299px;
          border: 3px solid ${colors.white};
          z-index:2;
  `;
  
  export const Wrapper  = styled.div`
          padding: 2rem;
          border: 3px solid ${colors.white};
  `;
  
  export const Header = styled.header`
          margin:0rem 0 2.5rem;
          text-align:center;
  `;
  
  export const HeaderTitle = styled.h2`
          ${textStyles};
          color:${colors.white};
  `;
  
  export const FormActionsBox = styled.div`
          display:flex;
          justify-content:space-between;
          align-items:center;
          width:100%;
  `;
  
  export const TooYoung = styled.div`
          padding:3rem 1rem 3rem;
          text-align:center;
          color:${colors.white};
  `;
  
  export const  TooYoungTitle = styled.h2`
          text-align:center;
  `;
  
  export const  TooYoungCaption = styled.p`
          margin-top:1rem;
          font-size: ${fontSize.normal};
          line-height:1.75rem;
  `;
  