/* Custom Toggle Switch */
.toggle-switch-visual {
    display: inline-block;
    position: relative;
    /* Tailwind classes are already applied in HTML for w-11 h-6 bg-gray-700 rounded-full */
    /* So only relative, cursor, transition for dot needs to be here */
}

.toggle-switch-visual .dot {
    position: absolute;
    /* Tailwind classes are already applied in HTML for left-[2px] top-[2px] bg-white w-5 h-5 rounded-full */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

input[type="checkbox"]:checked + .toggle-switch-visual {
    background-color: #2563eb; /* peer-checked:bg-blue-600 */
}

input[type="checkbox"]:checked + .toggle-switch-visual .dot {
    transform: translateX(100%); /* peer-checked:after:translate-x-full */
}

.emoji {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.emoji-img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    display: inline-block;
}