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

import { ICloseButton } from './CloseButton.interface'

export const StyledCloseButton = styled.div<ICloseButton>`
  font-family: arial, 'sans-serif' !important;
  position: absolute;
  top: 15px;
  right: 15px;

  color: currentColor;
  font-size: 0;

  background: none;

  cursor: pointer;
  z-index: 5;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: auto;

    width: 100%;
    height: 0;
    border-top: 1px solid currentColor;

    transform-origin: center;
    transition: all 0.3s linear;
  }

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  &:hover {
    &:before {
      transform: translate(-50%, -50%) rotate(25deg);
    }
    &:after {
      transform: translate(-50%, -50%) rotate(-25deg);
    }
  }

  ${props => {
    switch (props.$variant) {
      case 'md':
      default:
        return css`
          width: 3rem !important;
          height: 3rem !important;
        `
      case 'sm':
        return css`
          width: 1.2rem !important;
          height: 1.2rem !important;
        `
    }
  }}
`