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

export const IconWrapper = styled('div')<{
  isHover: boolean;
  isDisabled?: boolean;
}>`
  position: relative;
  display: inline-flex;
  outline: none;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  opacity: ${(props) => (props.isDisabled ? 0.7 : 1)};

  ${(props) =>
    props.isDisabled
      ? css`
          [data-status='normal'] {
            opacity: 0.6;
            cursor: default;
          }
          [data-status='hover'] {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
          [data-status='active'] {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        `
      : css`
          cursor: pointer;

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

          ${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;
`;