.colorpicker {
    @apply inline-flex items-center rounded-md h-11 shadow-input;

    input[type="color"] {
        @apply rounded-l-md-inset rounded-r-none h-full shrink-0 min-w-11;
        @apply border-md border-secondary border-r-0 outline-transparent;
        transition: outline 125ms ease-in-out;

        &:focus {
            @apply border-primary outline-2 outline-offset-2 outline-cyan-600 z-2;
        }
    }

    input[type="text"] {
        @apply rounded-none grow min-w-12 font-mono;
    }

    button {
        @apply w-11 min-w-11 h-11 min-h-11 shrink-0 flex items-center justify-center relative right-0;
        @apply border-md border-secondary rounded-l-none rounded-r-md -ml-[1.5px];
        @apply focus:border-primary;
        transition: background-color 125ms ease-in-out,
            box-shadow 125ms ease-in-out,
            border-color 125ms ease-in-out;

        &:hover {
            @apply bg-teal-100 shadow-input-hover;
        }

        &:active {
            @apply pt-2px;
        }
    }
}