/* Icon Components Styles - Modern Mobile App Design */
.ui-icon {
    display: inline-block;
    width: var(--icon-size-base);
    height: var(--icon-size-base);
    flex-shrink: 0;
    color: currentColor;
    transition: all 0.2s ease;
}

.ui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Icon Sizes */
.ui-icon-small {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.ui-icon-medium {
    width: var(--icon-size-base);
    height: var(--icon-size-base);
}

.ui-icon-large {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.ui-icon-xlarge {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}

/* Icon Colors */
.ui-icon-primary {
    color: var(--color-primary);
}

.ui-icon-secondary {
    color: var(--color-secondary);
}

.ui-icon-danger {
    color: var(--color-danger);
}

.ui-icon-success {
    color: var(--color-success);
}

.ui-icon-text {
    color: var(--color-text);
}

.ui-icon-text-secondary {
    color: var(--color-text-secondary);
}

/* All icons use the same base size - no individual size overrides */

/* Icon Hover Effects */
.ui-icon:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Icon Active State */
.ui-icon:active {
    transform: scale(0.95);
}