/* ============================================
   ICON ATOM - Base Icon Component
   ============================================ */

.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    fill: currentColor;
    transition: transform 0.3s ease;
}

/* Icon Sizes */
.icon--small {
    width: 16px;
    height: 16px;
}

.icon--medium {
    width: 24px;
    height: 24px;
}

.icon--large {
    width: 32px;
    height: 32px;
}

/* Icon Variants */
.icon--app-store,
.icon--google-play {
    /* Platform-specific icons */
}

/* Icon Hover Effects (when inside interactive elements) */
a:hover .icon,
button:hover .icon {
    transform: scale(1.1);
}

/* Icon color inheritance - icons inherit text color from parent */
.icon {
    color: inherit;
}

/* Ensure icon color changes with button hover state */
.btn--primary:hover:not(.btn--disabled) .icon,
a.btn--primary:hover:not(.btn--disabled) .icon {
    color: white;
    fill: white;
}

/* Icon in Buttons */
.btn .icon {
    width: 24px;
    height: 24px;
}

.btn--small .icon {
    width: 16px;
    height: 16px;
}

.btn--large .icon {
    width: 32px;
    height: 32px;
}