/* Default state (toggle OFF) */
[data-practice-mode="true"] .practice {
    background-color: transparent; /* No background */
    color: var(--md-typeset-a-color); /* Inherit text color */
    cursor: default; /* Default cursor */
    border-bottom: 2px solid var(--md-typeset-a-color);
    border-bottom-style: dotted;
    padding: 2px 4px; /* Add some padding for better appearance */
    /* border-radius: 3px;  */
}

/* Toggle ON state */
[data-practice-mode="true"] .practice.hidden {
    color: transparent; /* Hide the text */
    user-select: none; /* Prevent text selection */
    padding: 2px 4px;
    /* border-bottom: 2px solid red; */
    cursor: pointer; /* Indicate it's clickable */
}

/* Hover effect for practice words (only in practice mode) */
[data-practice-mode="true"] .practice:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Light background on hover */
}

/* Hide/show icons based on practice mode */
#toggle-practice-mode .md-icon {
    display: none; /* Hide all icons by default */
}

#toggle-practice-mode .md-icon[data-practice-mode="false"] {
    display: inline-block; /* Show OFF icon when practice mode is OFF */
}

[data-practice-mode="true"]
    #toggle-practice-mode
    .md-icon[data-practice-mode="true"] {
    display: inline-block; /* Show ON icon when practice mode is ON */
}