SimpleNotes/css/src/button.pcss

.btn {
    @apply font-semibold py-2 px-4 rounded;

    &:focus {
        @apply outline-none ring;
    }

    &:hover {
        --CASL: 1;
        @apply font-extrabold;
    }
}

.btn-teal {
    @apply bg-teal-400 text-gray-800;

    &:focus {
        @apply bg-teal-600;
    }

    &:hover {
        @apply bg-teal-600;
    }
}

.btn-green {
    @apply bg-green-400 text-gray-800;

    &:focus {
        @apply bg-green-600;
    }

    &:hover {
        @apply bg-green-600;
    }
}

.btn-red {
    @apply bg-red-400 text-gray-800;

    &:focus {
        @apply bg-red-600;
    }

    &:hover {
        @apply bg-red-600;
    }
}