form: Textarea

.form-label {
  @apply .text-black .font-bold;
}

.text-input,
.textarea,
.select {
  @apply .border .border-gray-light .bg-white .rounded;
}

.form-helper {
  @apply .text-gray-dark .text-xs .block .pt-1 .pl-2;
}

.radio__input {
  opacity: 0;
  position: absolute;
  cursor: pointer;

  &:hover + .radio__label:before {
    @apply bg-gray;
  }

  &:checked + .radio__label:after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 8px;
  }

  &:checked +.radio__label:before {
    @apply bg-primary-light;
  }
}

.radio__label {
  position: relative;

  &:before {
    display: inline-block;
    content: '';
    height: 24px;
    width: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    @apply bg-gray-light;

   }
}

.radio__label, .checkbox__label {
    height: 24px;
    display: inline-block;
    cursor: pointer;

    span {
      position: relative;
      top: 2px;
    }
  }

 .checkbox__input {
  opacity: 0;
  position: absolute;
  cursor: pointer;

  &:hover + .checkbox__label:before {
    @apply bg-gray;
  }

  &:checked +.checkbox__label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 9px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
   }

   &:checked + .checkbox__label:before {
     @apply bg-primary-light;
   }

 }

.checkbox__label {
  position: relative;
}

.checkbox__label:before {
  display: inline-block;
  content: '';
  height: 24px;
  width: 24px;
  vertical-align: middle;
  margin-right: 8px;
  @apply bg-gray-light;
}

.focus, [contentEditable=true]:focus, [href]:focus, [tabindex]:focus, button:not([disabled]):focus, iframe:focus, input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus {
  outline: 0;
  box-shadow: 0 0 0 3px theme('colors.primary.transparent');
}