.token {
    cursor: text;
}

.token-word {
    cursor: pointer;
    padding: 2px 0;
    border-radius: 3px;
    transition: background-color 0.2s;
}

:root {
    --status-unknown-bg: #fef08a;
    /* yellow-200 */
    --status-unknown-hover: #fde047;
    /* yellow-300 */
    --status-learning-bg: #dcfce7;
    /* green-100 */
    --status-learning-hover: #86efac;
    /* green-300 */
    --status-known-hover: #e5e7eb;
    /* gray-200 */
    --token-hover: #e5e7eb;
}

.dark {
    --status-unknown-bg: #854d0e;
    /* yellow-800 */
    --status-unknown-hover: #a16207;
    /* yellow-700 */
    --status-learning-bg: #14532d;
    /* green-900 */
    --status-learning-hover: #166534;
    /* green-800 */
    --status-known-hover: #374151;
    /* gray-700 */
    --token-hover: #374151;
}

.token-word:hover {
    background-color: var(--token-hover);
}

/* Word Status Colors */
.status-unknown {
    background-color: var(--status-unknown-bg);
}

.status-learning {
    background-color: var(--status-learning-bg);
}

.status-known {
    background-color: transparent;
}

.token-word.status-unknown:hover {
    background-color: var(--status-unknown-hover);
}

.token-word.status-learning:hover {
    background-color: var(--status-learning-hover);
}

.token-word.status-known:hover {
    background-color: var(--status-known-hover);
}

.selected {
    text-decoration: underline;
}

/* Custom Scrollbar for better visibility on iOS/Web */
/* Target all elements with scroll */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* slate-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    /* slate-400 */
}

/* Status Cycle Button */
.btn-status-cycle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.25rem;
    text-align: left;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
    cursor: pointer;
}

/* Status variants */
.status-btn-unknown {
    background-color: var(--status-unknown-bg);
    border-color: rgba(0, 0, 0, 0.1);
}

.status-btn-unknown:hover {
    background-color: var(--status-unknown-hover);
}

.status-btn-learning {
    background-color: var(--status-learning-bg);
    border-color: rgba(0, 0, 0, 0.1);
}

.status-btn-learning:hover {
    background-color: var(--status-learning-hover);
}

.status-btn-known {
    background-color: transparent;
    border-color: currentColor;
    opacity: 0.8;
}

.status-btn-known:hover {
    background-color: var(--status-known-hover);
    opacity: 1;
}

.status-btn-untracked {
    background-color: transparent;
    border-color: currentColor;
    border-style: dashed;
    opacity: 0.6;
}

.status-btn-untracked:hover {
    background-color: var(--token-hover);
    opacity: 1;
    border-style: solid;
}

/* Icon styles */
.status-icon-unknown,
.status-icon-learning,
.status-icon-known,
.status-icon-untracked {
    font-weight: bold;
}

.dark .status-btn-unknown {
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .status-btn-learning {
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .status-btn-untracked {
    border-color: rgba(255, 255, 255, 0.4);
}