import styled from 'styled-components';
import RectangleLoader from '../RectangleLoader';
import { tablet, mobile } from '@appserver/components/utils/device';

const StyledContainer = styled.div`
  margin: 0;

  max-width: 216px;
  padding: 0 20px;

  @media ${tablet} {
    width: ${(props) => (props.showText ? '240px' : '52px')};
    padding: ${(props) => (props.showText ? '0 16px' : '10px 16px')};
  }

  @media ${mobile} {
    width: 100%;
    padding: 0 16px;
  }
`;

const StyledBlock = styled.div`
  margin: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  @media ${tablet} {
    margin-bottom: 24px;
  }
`;

const StyledRectangleLoader = styled(RectangleLoader)`
  height: 20px;
  width: 208px;
  padding: 0 0 16px;

  @media ${tablet} {
    height: 20px;
    width: 20px;
    padding: 0 0 24px;
  }
`;

export { StyledBlock, StyledContainer, StyledRectangleLoader };