/* =================================================================
   THEME ICON SYSTEM STYLES
   Supports the custom ThemeIcon component functionality
   ================================================================= */

:root {
    /* Icon size variables */
    --app-icon-size-small: 50px;
    --app-icon-size-medium: 75px;
    --app-icon-size-large: 100px;
    --app-icon-size-xlarge: 200px;

    /* Avatar dimensions */
    --app-avatar-small: 50px;
    --app-avatar-medium: 100px;
    --app-avatar-large: 200px;
    --app-avatar-xlarge: 250px;
}

/* Base theme icon styles */
.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Theme icon size variants */
.theme-icon-small {
    height: var(--app-icon-size-small);
    width: var(--app-icon-size-small);
}

.theme-icon-medium {
    height: var(--app-icon-size-medium);
    width: var(--app-icon-size-medium);
}

.theme-icon-large {
    height: var(--app-icon-size-large);
    width: var(--app-icon-size-large);
}

.theme-icon-xlarge {
    height: var(--app-icon-size-xlarge);
    width: var(--app-icon-size-xlarge);
}

/* Avatar styles */
.avatar-small {
    height: var(--app-avatar-small);
    width: var(--app-avatar-small);
}

.avatar-medium {
    height: var(--app-avatar-medium);
    width: var(--app-avatar-medium);
}

.avatar-large {
    height: var(--app-avatar-large);
    width: var(--app-avatar-large);
}

.avatar-xlarge {
    height: var(--app-avatar-xlarge);
    width: var(--app-avatar-xlarge);
}