// Equivalente al prefijo `dark:` de Tailwind: el toggle de tema pone la clase
// `.dark` en <html> (ver resources/js/composables/useTheme.ts), así que
// cualquier regla dentro de este mixin solo aplica bajo esa clase ancestro.
// Uso en los partials globales de components/ (no pasan por el compilador
// "scoped" de Vue, así que acá ".dark &" alcanza). Los dos componentes que
// SÍ usan <style scoped> (DailyLoginsChart, Analytics) escriben
// ":global(.dark) &" directo en vez de este mixin — ver nota en esos archivos.
@mixin dark {
    .dark & {
        @content;
    }
}

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

    &:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
}

@mixin truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin respond-up($breakpoint) {
    @media (min-width: $breakpoint) {
        @content;
    }
}