import styled, { css } from 'styled-components';

export const IconWrapper = styled('div')<{isHover: boolean}>`
  position: relative;
  display: inline-flex;
  cursor: pointer;
  outline: none;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;

  [data-status='normal'] {
    opacity: 1;
    transition-delay: 100ms;
  }
  [data-status='hover'] {
    transition-delay: 100ms;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  [data-status='active'] {
    transition-delay: 100ms;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  ${props => props.isHover ? css`
    :hover {
      [data-status='hover'] {
        opacity: 1;
      }
      [data-status='normal'] {
        opacity: 0;
      }
    }
  ` : null}
`;

export const ClickZone = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  outline: none;
  z-index: 10;
`;
