.custom-btn-close {
    color: white;
    font-size: 1.75rem;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

.active-keyboard-item {
    background-color: var(--primary);
    color: var(--white);
    border-radius: 0.375rem !important;
    cursor: pointer;

    &:hover {
        background-color: var(--primary) !important;
        color: var(--white) !important;
        border-radius: 0.375rem !important;
    }
}

.inactive-keyboard-item {
    background-color: var(--white);
    color: var(--font-dark);
    border-radius: 0rem !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;

    &:hover {
        background-color: var(--primary-light) !important;
        color: var(--font-dark) !important;
        border-radius: 0.375rem !important;
    }
}

.max-w-min {
    max-width: min-content;
}

.text-nowrap {
    text-wrap: nowrap;
}

.px-5 {
    padding-inline: 1.25rem !important;
}

.h-24 {
    height: 6rem;
}

.w-64 {
    width: 16rem;
}

.w-78 {
    width: 18rem;
}

.max-w-full {
    max-width: 100%;
}

.max-h-full {
    max-height: 100%;
}

.size-5 {
    width: 1.25rem;
    height: 1.25rem;
}

.min-h-20 {
    min-height: 5rem;
}

.object-fit-cover {
    object-fit: cover;
}

/* Tailwind related classes */
.text-sm {
    font-size: 0.875rem;
}

.font-medium {
    font-weight: 600;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.25rem !important;
}

.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.text-primary {
    color: var(--primary) !important;
}

.font-mono {
    font-family: monospace !important;
}