/* Common Style */
body{
  @apply font-base
}
.control {
  @apply block relative cursor-pointer appearance-none
}
.control input {
  @apply absolute opacity-0 h-0 w-0
}
.control__indicator {
  @apply absolute left-0 top-0 rounded-sm bg-white border border-solid border-borderColors;
}
  .control:hover input ~ .control__indicator  {
    @apply bg-gray;
  }
.control input:checked ~ .control__indicator {
   @apply bg-white opacity-60 pointer-events-none;
  }
.control__indicator:after {
    @apply absolute hidden;
    content: '';
  }
.control input:checked ~ .control__indicator:after {
    @apply block;
  }
  .control--checkbox .control__indicator:after {
    @apply border-solid;
    transform: rotate(45deg);
    }

/* Default */
    .checkbox-default .control__indicator{
      @apply bg-gray;
    }
    .checkbox-default.control:hover input ~ .control__indicator  {
      @apply bg-gray;
    }
    .checkbox-default.control input:checked ~ .control__indicator {
      @apply bg-gray opacity-100 pointer-events-none;
     }
     .checkbox-default.control--checkbox .control__indicator:after {
      @apply border-dark;
      transform: rotate(45deg);
      }
/* Primary */
    .checkbox-primary .control__indicator{
      @apply bg-gray
    }
    .checkbox-primary.control:hover input ~ .control__indicator  {
      @apply bg-primary;
    }
    .checkbox-primary.control input:checked ~ .control__indicator {
      @apply bg-primary opacity-100 pointer-events-none;
     }
     .checkbox-primary.control--checkbox .control__indicator:after {
      @apply border-white;
      transform: rotate(45deg);
      }
/* Secondary */
    .checkbox-secondary .control__indicator{
      @apply bg-gray
    }
    .checkbox-secondary.control:hover input ~ .control__indicator  {
      @apply bg-secondary;
    }
    .checkbox-secondary.control input:checked ~ .control__indicator {
      @apply bg-secondary opacity-100 pointer-events-none;
     }
     .checkbox-secondary.control--checkbox .control__indicator:after {
      @apply border-white;
      transform: rotate(45deg);
      }

  /* Disabled */
      .control input:disabled ~ .control__indicator {
        @apply bg-disabled opacity-60 pointer-events-none;
        }
      .control--checkbox input:disabled ~ .control__indicator:after {
        @apply border-disabled;
        }



  /* Size default */
    .size-default .control__indicator{
      @apply !h-5 !w-5;
    }
    .size-default.control{
      @apply pl-8 text-base;
    }
    .size-default.control--checkbox .control__indicator:after {
      @apply left-2 top-1 w-[3px] h-[8px] border-t-0 border-r-2 border-b-2 border-l-0;
      transform: rotate(45deg);
      }
  /* Size small */
    .size-small .control__indicator{
      @apply !h-4 !w-4;
    }
    .size-small.control{
      @apply pl-6 text-sm;
    }
    .size-small.control--checkbox .control__indicator:after {
      @apply left-[5px] top-[2px] w-[3px] h-[8px] border-t-0 border-r-2 border-b-2 border-l-0;
      transform: rotate(45deg);
      }
  /* Size medium */
    .size-medium .control__indicator{
      @apply !h-7 !w-7;
    }
    .size-medium.control{
      @apply pl-12 text-2xl;
    }
    .size-medium.control--checkbox .control__indicator:after {
      @apply left-[10px] top-1 w-[6px] h-[14px] border-t-0 border-r-[3px] border-b-[3px] border-l-0;
      transform: rotate(45deg);
      }
  /* Size large */
    .size-large .control__indicator{
      @apply !h-10 !w-10;
    }
    .size-large.control{
      @apply pl-16 text-4xl;
    }
    .size-large.control--checkbox .control__indicator:after {
      @apply left-[14px] top-[3px] w-[10px] h-[24px] border-t-0 border-r-4 border-b-4 border-l-0;
      transform: rotate(45deg);
      }
      /* Rounded default */
      .rounded-default .control__indicator{
        @apply rounded-none;
      }
      /* Rounded small */
      .rounded-small .control__indicator{
        @apply rounded-sm;
      }
      /* Rounded medium */
      .rounded-medium .control__indicator{
        @apply rounded-md;
      }
      /* Rounded large */
      .rounded-large .control__indicator{
        @apply rounded-lg;
      }