.input {
    @apply w-full;
    @apply max-w-full;
    @apply min-h-13;
    @apply px-6;
    @apply py-4;
    @apply rounded-sm;
    @apply bg-white;
    @apply border;
    @apply border-solid;
    @apply border-sand-bleak;
    @apply hover:border-blue;
    @apply placeholder:text-navy/50;
    @apply text-sm;
    @apply leading-none;
    @apply shadow-input;
}

.input-html {
    min-height: 8rem;
    max-width: none;
    @apply w-full;
    @apply py-2;
    @apply font-mono;
}

input[readonly],
input:disabled {
    @apply opacity-90;
    @apply cursor-not-allowed;
}

.input:focus,
.input:focus-within {
    @apply bg-white;
    @apply border-blue;
    @apply outline-hidden;
}

input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23648BEF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}