import styled from 'styled-components';

const css = styled.div;

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

   .title {
      padding-left: 10px;
   }

   input {
      display: none;

      & + .checkbox {
         width: ${(props) => props.size ?? 18}px;
         height: ${(props) => props.size ?? 18}px;
         display: inline-block;
         border-radius: 3px;
         border: 2px solid rgba(0, 0, 0, 0.25);
         position: relative;
         ${(props) => props.rounded && `border-radius: 100px;`}
         display: flex;
         align-items: center;
         justify-content: center;

         i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: ${(props) => (props.size ?? 18) * 0.6}px;
            display: none;
            color: white;
         }

         svg {
            color: white;
            width: ${(props) => (props.size ?? 18) * 0.6}px;
            height: ${(props) => (props.size ?? 18) * 0.6}px;
         }

         &:hover {
            cursor: pointer;
         }

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

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

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

         i {
            display: block;
         }

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