/* ============================================================================
   06-COMPONENTS -> #ICON
   ========================================================================= */

/**
 * Displays a graphical symbol that indicates an event or action.
 */


//
// SCSS imports
//

@use '../01-settings' as *;


/**
 * Icon
 *
 * 1. Takes the colour of the parent element.
 */

.icon {
    --icon-size: var(--icon-size-lg);

    fill: none;
    flex: 0 0 auto;
    height: var(--icon-size);
    pointer-events: none;
    position: relative;
    stroke: currentColor; // [1]
    vertical-align: middle;
    width: var(--icon-size);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Extra small icon
 */

.icon[data-size=xs] {
    --icon-size: 1rem;
}


/**
 * Small icon
 */

.icon[data-size=sm] {
    --icon-size: 1.25rem;
}


/**
 * Large icon
 */

.icon[data-size=lg] {
    --icon-size: 2rem;
}
  

/**
 * Extra large icon
 */

.icon[data-size=xl] {
    --icon-size: 2.5rem;
}