import styled from 'styled-components';
import { animated } from 'react-spring';
import theme from 'styles/theme';

export const GroupWrap = styled.div`
    > label:not(:last-child) {
        margin-right: 15px;
    }
`;

export const Wrapper = styled.label<any>`
    position: relative;
    user-select: none;
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
    display: inline-flex;

    font-size: 14px;
    color: ${p => (p.disabled ? '#CED1D7' : '#434c5d')};
    letter-spacing: 0.3px;
    line-height: 20px;
    transform-style: preserve-3d;
    span {
        margin-left: 8px;
    }
    &:hover::before {
        background-color: #ebf7f9;
        opacity: 1;
        transform: translateZ(-1px) scale(1);
    }
    &:active::before {
        background-color: #f5f5f5;
        opacity: 1;
        transform: translateZ(-1px) scale(1);
    }
    &::before {
        // pseudo-elements-below-their-parent https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e
        transform: translateZ(-1px) scale(0);
        display: block;
        content: ' ';
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        left: -6px;
        top: -6px;
        opacity: 0;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-property: transform, opacity;
    }
`;
export const FakeCheck = styled.div<any>`
    box-sizing: border-box;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    border: 2px solid ${p => (p.checked || p.indeterminate ? (p.disabled ? '#CED1D7' : p.theme.brand) : '#b6bbc7')};
    background-color: ${p => (p.checked || p.indeterminate ? (p.disabled ? '#CED1D7' : p.theme.brand) : 'white')};
    border-radius: 2px;
    line-height: 20px;
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};

    width: 16px;
    height: 16px;
    margin: 2px;
`;
FakeCheck.defaultProps = { theme };
export const InputCheck = styled.input.attrs(() => ({
    type: 'checkbox',
}))<any>`
    position: absolute;
    line-height: 20px;
    cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};

    margin: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
`;

export const CheckMark = animated(styled.div`
    position: absolute;
    top: 4px;
    left: 8px;
    box-sizing: border-box;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    width: 5px;
    height: 10px;
`);

export const IndeterminateMark = animated(styled.div`
    position: absolute;
    top: 9px;
    left: 6px;
    width: 8px;
    height: 2px;
    box-sizing: border-box;
    background-color: white;
`);