﻿.ui-text {
    margin: 0;
    line-height: 1.4;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    word-wrap: break-word;
}

.ui-text-container {
    display: flex;
    align-items: center;
}

.ui-text-container.clickable {
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ui-text-container.clickable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Size Classes */
.ui-text.size-extra-small {
    font-size: 0.65rem;
}

.ui-text.size-small {
    font-size: 0.75rem;
}

.ui-text.size-normal {
    font-size: 0.875rem;
}

.ui-text.size-medium {
    font-size: 1rem;
}

.ui-text.size-large {
    font-size: 1.125rem;
}

.ui-text.size-extra-large {
    font-size: 1.25rem;
}

.ui-text.size-heading {
    font-size: 1.5rem;
}

/* Weight Classes */
.ui-text.weight-light {
    font-weight: 300;
}

.ui-text.weight-normal {
    font-weight: 400;
}

.ui-text.weight-medium {
    font-weight: 500;
}

.ui-text.weight-semi-bold {
    font-weight: 600;
}

.ui-text.weight-bold {
    font-weight: 700;
}

.ui-text.weight-extra-bold {
    font-weight: 800;
}

/* Alignment Classes */
.ui-text.align-left {
    text-align: left;
    justify-content: flex-start;
}

.ui-text.align-center {
    text-align: center;
    justify-content: center;
}

.ui-text.align-right {
    text-align: right;
    justify-content: flex-end;
}

.ui-text.align-justify {
    text-align: justify;
}

/* Icon Position Classes */
.ui-text.icon-left {
    flex-direction: row;
    gap: 0.25rem;
}

.ui-text.icon-right {
    flex-direction: row-reverse;
    gap: 0.25rem;
}

.ui-text.icon-top {
    flex-direction: column;
    gap: 0.125rem;
    align-items: center;
    text-align: center;
}

.ui-text.icon-bottom {
    flex-direction: column-reverse;
    gap: 0.125rem;
    align-items: center;
    text-align: center;
}

/* Icon Styling */
.ui-text-icon {
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ui-text.size-extra-small .ui-text-icon {
    font-size: 0.65rem;
}

.ui-text.size-small .ui-text-icon {
    font-size: 0.75rem;
}

.ui-text.size-normal .ui-text-icon {
    font-size: 0.875rem;
}

.ui-text.size-medium .ui-text-icon {
    font-size: 1rem;
}

.ui-text.size-large .ui-text-icon {
    font-size: 1.125rem;
}

.ui-text.size-extra-large .ui-text-icon {
    font-size: 1.25rem;
}

.ui-text.size-heading .ui-text-icon {
    font-size: 1.5rem;
}

/* Font and Transform Classes */
.ui-text.monospace {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.5px;
}

.ui-text.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ui-text.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Interactive Classes */
.ui-text.text-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-text.text-clickable:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

.ui-text.text-clickable:active {
    transform: translateY(0);
}

.ui-text.text-hoverable {
    transition: opacity 0.2s ease;
}

.ui-text.text-hoverable:hover {
    opacity: 0.7;
}

/* Visual Effects */
.ui-text.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ui-text.text-shadow-md {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ui-text.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ui-text.text-glow {
    text-shadow: 0 0 10px currentColor;
}

.ui-text.text-highlighted {
    padding: 2px 4px;
    border-radius: 3px;
}

.ui-text.text-highlighted-warning {
    background-color: #fff3cd;
}

.ui-text.text-highlighted-info {
    background-color: #d1ecf1;
}

.ui-text.text-highlighted-success {
    background-color: #d4edda;
}

.ui-text.text-highlighted-danger {
    background-color: #f8d7da;
}

.ui-text.text-highlighted-primary {
    background-color: #cce7ff;
}

.ui-text.text-highlighted-secondary {
    background-color: #e2e3e5;
}

/* Animation Classes */
.ui-text.animate-pulse {
    animation: uiTextPulse 2s infinite;
}

.ui-text.animate-bounce {
    animation: uiTextBounce 1s infinite;
}

.ui-text.animate-fade-in {
    animation: uiTextFadeIn 0.5s ease-in;
}

@keyframes uiTextPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes uiTextBounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -8px, 0); }
    70% { transform: translate3d(0, -4px, 0); }
    90% { transform: translate3d(0, -2px, 0); }
}

@keyframes uiTextFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Typewriter Animation */
.ui-text.text-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2s steps(40) forwards;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* Fade In Animation */
.ui-text.text-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Tooltip */
.ui-text[data-tooltip] {
    position: relative;
}

.ui-text[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: uiTooltipFadeIn 0.3s ease forwards;
    margin-bottom: 0.25rem;
}

@keyframes uiTooltipFadeIn {
    to { opacity: 1; }
}

/* Copy Button */
.copy-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ui-text.size-heading {
        font-size: 1.25rem;
    }

    .ui-text.size-extra-large {
        font-size: 1.125rem;
    }

    .ui-text.size-large {
        font-size: 1rem;
    }

    .ui-text-container.clickable {
        padding: 0.5rem;
    }
}

/* Dark theme support with higher specificity */
[data-theme="dark"] .ui-text,
.dark .ui-text,
body.dark .ui-text,
body[data-theme="dark"] .ui-text {
    color: #e2e8f0 !important;
}

/* Dark theme color overrides */
[data-theme="dark"] .ui-text.text-muted,
.dark .ui-text.text-muted,
body.dark .ui-text.text-muted,
body[data-theme="dark"] .ui-text.text-muted {
    color: #a0aec0 !important;
}

[data-theme="dark"] .ui-text.text-primary,
.dark .ui-text.text-primary,
body.dark .ui-text.text-primary,
body[data-theme="dark"] .ui-text.text-primary {
    color: #63b3ed !important;
}

[data-theme="dark"] .ui-text.text-secondary,
.dark .ui-text.text-secondary,
body.dark .ui-text.text-secondary,
body[data-theme="dark"] .ui-text.text-secondary {
    color: #a0aec0 !important;
}

[data-theme="dark"] .ui-text.text-success,
.dark .ui-text.text-success,
body.dark .ui-text.text-success,
body[data-theme="dark"] .ui-text.text-success {
    color: #68d391 !important;
}

[data-theme="dark"] .ui-text.text-danger,
.dark .ui-text.text-danger,
body.dark .ui-text.text-danger,
body[data-theme="dark"] .ui-text.text-danger {
    color: #fc8181 !important;
}

[data-theme="dark"] .ui-text.text-warning,
.dark .ui-text.text-warning,
body.dark .ui-text.text-warning,
body[data-theme="dark"] .ui-text.text-warning {
    color: #f6e05e !important;
}

[data-theme="dark"] .ui-text.text-info,
.dark .ui-text.text-info,
body.dark .ui-text.text-info,
body[data-theme="dark"] .ui-text.text-info {
    color: #63b3ed !important;
}

[data-theme="dark"] .ui-text.text-light,
.dark .ui-text.text-light,
body.dark .ui-text.text-light,
body[data-theme="dark"] .ui-text.text-light {
    color: #f7fafc !important;
}

[data-theme="dark"] .ui-text.text-dark,
.dark .ui-text.text-dark,
body.dark .ui-text.text-dark,
body[data-theme="dark"] .ui-text.text-dark {
    color: #2d3748 !important;
}

/* Dark theme effects */
[data-theme="dark"] .ui-text.text-glow,
.dark .ui-text.text-glow,
body.dark .ui-text.text-glow,
body[data-theme="dark"] .ui-text.text-glow {
    --glow-color: #63b3ed;
}

[data-theme="dark"] .ui-text.text-highlighted,
.dark .ui-text.text-highlighted,
body.dark .ui-text.text-highlighted,
body[data-theme="dark"] .ui-text.text-highlighted {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-left-color: #63b3ed !important;
}

[data-theme="dark"] .ui-text.text-shadow-sm,
[data-theme="dark"] .ui-text.text-shadow-md,
[data-theme="dark"] .ui-text.text-shadow-lg,
.dark .ui-text.text-shadow-sm,
.dark .ui-text.text-shadow-md,
.dark .ui-text.text-shadow-lg,
body.dark .ui-text.text-shadow-sm,
body.dark .ui-text.text-shadow-md,
body.dark .ui-text.text-shadow-lg,
body[data-theme="dark"] .ui-text.text-shadow-sm,
body[data-theme="dark"] .ui-text.text-shadow-md,
body[data-theme="dark"] .ui-text.text-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}