pdf-reader-web/components/Icon/styled.ts

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