import styled from 'styled-components';

const css = styled.div;

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

   .title {
      align-self: center;
      padding-left: 10px;

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

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

   input {
      display: none;

      & + .checkbox {
         width: 18px;
         height: 18px;
         display: inline-block;
         border-radius: 3px;
         border: 2px solid rgba(0, 0, 0, 0.25);
         position: relative;

         i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 11px;
            display: none;
            color: white;
         }

         &: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};
         }
      }
   }

   .has-error {
      border-color: ${(props) => props.theme.red} !important;
   }

   .error-input {
      color: ${(props) => props.theme.red};
      text-align: left;
      font-weight: 600;
      margin: 0px;
      padding: 0px;
      font-size: 13px;
      margin-top: 2px;
      margin-bottom: 10px;
   }
`;
