import styled, { css } from 'styled-components';
import iconCheck from '../images/done_all.png';
import iconMagnifier from '../images/magnifier.png';

export const TileButton = styled.button<{ small?: boolean }>`
  background-color: ${({ theme: { colors } }) => colors.main};
  color: ${({ theme: { colors } }) => colors.default};
  text-transform: uppercase;
  font-size: ${({ theme: { fontSizes } }) => fontSizes.medium};
  border: none;
  width: 100%;
  height: 88px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5;
  ${({ small }) =>
    small &&
    css`
      height: 50px;
      font-size: 12px
    `}
  &:active {
    transition: all 0.5;
    position: relative;
    top: 5px;
  }
`;

export const TileWhiteButton = styled(TileButton)`
  background-color: ${({ theme: { colors } }) => colors.default};
  color: ${({ theme: { colors } }) => colors.main};
`;

export const TileButtonSuccess = styled(TileButton)`
  background-color: ${({ theme: { colors } }) => colors.success};
  color: ${({ theme: { colors } }) => colors.default};
`;

export const CheckImg = styled.div`
  height: 45px;
  width: 54px;
  background: url(${iconCheck}) no-repeat center;
  background-size: cover;
`;

export const MagnifierImg = styled(CheckImg)`
  background: url(${iconMagnifier}) no-repeat center;
  height: 50px;
`;

export const ButtonsListStyled = styled.div`
  background-color: #ffc200;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 550px;
  padding: 3px;

  button:not(:last-child) {
    margin-right: 5px;
  }
`;

export const ButtonCloseWrapper = styled.div`
  border: none;
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  right: 20px;
  top: 15px;
  cursor: pointer;
  padding: 0;
  &:focus {
    outline: none;
  }
  span {
    background: black;
    position: absolute;
    display: block;
    width: 61px;
    height: 10px;
    transform: rotate(45deg);
    &:last-child {
      transform: rotate(-45deg);
    }
  }
`;