import styled, { css } from 'styled-components';
import { default as Btn } from '../button';
export const Wrapper = styled.div``;

//export const CheckHover = styled.div<any>`
//    display: inline-flex;
//    box-sizing: border-box;
//    position: absolute;
//    justify-content: center;
//    align-items: center;
//    border-radius: 50%;
//    padding: 6px;
//    width: 32px;
//    top: -9px;
//    height: 32px;
//    ${p =>
//        !p.disabled &&
//        css`
//            :hover {
//                background: rgba(235, 247, 249, 0.5);
//            }
//            :active {
//                background: rgb(245, 245, 245, 0.5);
//            }
//        `}
//`;

export const CheckBall = styled.div<any>`
    border-radius: 50%;
    position: absolute;
    top: -3px;
    width: 20px;
    height: 20px;
    background: ${p => (p.checked ? '#00a4aa' : '#fafafa')};
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24);
`;

export const Button = styled(Btn).attrs(p => ({
    size: 'tiny',
}))<any>`
    position: relative;
    padding: 2px;
    border-radius: 7px;
    width: 34px;
    height: 14px;
    transform-style: preserve-3d;
    transition: none;
    background: ${p => (p.checked ? '#c7eeed' : '#B6BBC7')};
    :hover {
        background: ${p => (p.checked ? '#c7eeed' : '#B6BBC7')};
        &::before {
            background-color: #ebf7f9;
            border: none;
            box-shadow: none;
            width: 46px;
            height: 46px;
            opacity: 1;
            transform: scale(1) translateZ(-1px);
        }
    }
    :active::before {
        background-color: #f5f5f5;
    }
    ::before {
        content: '';
        display: block;
        opacity: 0;
        top: -16px;
        left: ${p => (p.checked ? '-1px' : '-11px')};
        position: absolute;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        background: none;
        border-radius: 50%;
        box-sizing: border-box;
        transform: scale(0);
        transition-property: transform, opacity;
    }
`;