.control {
  /* Theme */
  input {
    &:disabled ~ .control_indicator + * {
      @apply text-gray cursor-not-allowed;
    }

    &:focus ~ .control_indicator {
      @apply shadow-lg;
    }

    &[type="checkbox"] {
      &:checked ~ .control_indicator {
        @apply bg-black border-black;
      }

      &:checked:disabled ~ .control_indicator {
        @apply bg-gray border-gray;
      }

      &:disabled ~ .control_indicator {
        @apply bg-gray border-gray;
        &:after {
          @apply border-gray;
        }
      }

      & ~ .control_indicator {
        @apply bg-white border-gray text-white;

        &:after {
          content: "\2713";
          font-size: remy(24);
          top: remy(-4);
          //content: url("/images/check.svg");
          //top: remy(-1);
        }

        &:before {
          @apply bg-gray;
        }
      }
    }

    &[type="radio"] {
      &:checked ~ .control_indicator {
        @apply bg-white border-black;
      }

      &:checked:disabled ~ .control_indicator {
        @apply bg-gray border-gray;
      }

      &:disabled ~ .control_indicator {
        @apply bg-gray border-gray;
        &:after {
          @apply border-gray;
        }
      }

      & ~ .control_indicator {
        @apply bg-white border-gray text-white;

        &:after {
          @apply bg-black;
        }

        &:before {
          @apply bg-gray;
        }
      }
    }
  }

  &:hover input[type="checkbox"]:not([disabled]):checked ~ .control_indicator,
  input[type="checkbox"]:checked:focus ~ .control_indicator {
    @apply bg-black border-black;
  }
}