import styled from 'styled-components';
import { ThemeDefault } from '../../types/theme.interface';

const css = styled.div;

export default css<any>`
   .checkbox-container {
      cursor: pointer;
      display: flex;
      flex-direction: row;
   }

   .title {
      padding-left: 10px;
      line-height: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.15s color;
   }

   input {
      display: none;

      & + .checkbox {
         display: inline-flex;
         vertical-align: top;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
         width: ${(props) => (props.size ?? 35) * 2}px;
         height: ${(props) => props.size ?? 35}px;
         background: grey;
         background: #ddd;
         border-radius: 1000px;
         position: relative;
         transition: background-color 0.2s;
         margin-right: 0px;

         &:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: ${(props) => (props.size ?? 35) - 4}px;
            height: ${(props) => (props.size ?? 35) - 4}px;
            border-radius: 100px;
            transition: 0.2s;
            background: #fff;
            box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
         }

         &:hover {
            cursor: pointer;
         }

         &.disabled {
            background: #ddd;
            opacity: 0.6;
            cursor: not-allowed !important;

            &:hover {
               cursor: not-allowed !important;
            }
         }
      }

      &:checked + .checkbox {
         background: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.primary};

         &:before {
            transform: translateX(${(props) => props.size ?? 35}px);
         }

         & + .title {
            font-weight: 600;
            color: ${(props) => props.color ?? props.theme.primary};
         }
      }
   }
`;
