import styled, {css} from 'styled-components';
import {
  successColor,
  lineHeight,
  spacing,
  extraSmallDevices,
  mediumDevices,
} from '@propellerads/stylevariables';

interface StyledSuccessLabelProps {
    show: boolean
}

const StyledSuccessLabel = styled.div`
  display: inline-flex;
  align-items: center;
  height: ${lineHeight}px;
  padding: 0;
  transition: opacity .5s ease;
  color: ${successColor};
  opacity: 1;
  
  @media (min-width: ${mediumDevices}px) {
    max-width: 350px;
    white-space: nowrap;
  }
  
  ${(props: StyledSuccessLabelProps) => !props.show && css`
    transition: 0.5s linear all;
    opacity: 0;
  `}
`;

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

const StyledMessage = styled.div`
    display: none;

    @media (min-width: ${extraSmallDevices}px) {
      display: inline-flex;
      align-items: center;
    }
`;

export {StyledSuccessLabel, StyledIcon, StyledMessage};