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

const css = styled.div;

export default css<any>`
   width: 100%;

   .radio-container {
      width: 100%;
   }

   .title {
      align-self: center;
      padding-left: 10px;
      cursor: pointer;
      transition: 0.2s all;

      &.right {
         padding-left: 0px;
         padding-right: 10px;
      }

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

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

   input {
      display: none;

      & + .radio {
         width: 18px;
         height: 18px;
         display: inline-block;
         border-radius: 100px;
         border: 2px solid rgba(0, 0, 0, 0.25);
         position: relative;
         vertical-align: middle;
         transition: 0.2s all;

         &.right {
            float: right;
         }

         &:hover {
            cursor: pointer;
         }

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

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

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

         &:after {
            content: '';
            background: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.primary};
            border-radius: 100px;
            width: 8px;
            height: 8px;
            margin: 3px;
            display: block;
         }

         & + .title {
            //font-weight: 600;
            color: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.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;
   }

   .radio-label {
      &:hover {
         .title {
            color: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.primary};
            transition: 0.2s all;
         }

         input {
            display: none;

            & + .radio {
               transition: 0.2s all;
               border-color: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.primary};
            }
         }
      }
   }
`;
