/*
==========================================================
Arian UI Kit
Icon Component
Version : 1.0 Enterprise
Author  : Arian File
==========================================================
*/


/*==========================================================
Icon Wrapper
==========================================================*/

.af-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:var(--af-icon-wrapper);

    height:var(--af-icon-wrapper);

    background:var(--af-icon-bg);

    color:var(--af-icon-color);

    border-radius:var(--af-icon-radius);

    transition:
        background var(--af-transition),
        color var(--af-transition),
        transform var(--af-transition);

}


/*==========================================================
Hover
==========================================================*/

.af-icon:hover{

    background:var(--af-icon-bg-hover);

    color:var(--af-icon-color-hover);

    transform:translateY(-4px);

}


/*==========================================================
SVG
==========================================================*/

.af-icon svg{

    width:var(--af-icon-size);

    height:var(--af-icon-size);

    fill:currentColor;

}


/*==========================================================
Image Icon
==========================================================*/

.af-icon img{

    width:var(--af-icon-size);

    height:var(--af-icon-size);

    object-fit:contain;

}


/*==========================================================
Sizes
==========================================================*/

.af-icon-sm{

    width:var(--af-icon-wrapper-sm);

    height:var(--af-icon-wrapper-sm);

}

.af-icon-sm svg,
.af-icon-sm img{

    width:var(--af-icon-size-sm);

    height:var(--af-icon-size-sm);

}


.af-icon-lg{

    width:var(--af-icon-wrapper-lg);

    height:var(--af-icon-wrapper-lg);

}

.af-icon-lg svg,
.af-icon-lg img{

    width:var(--af-icon-size-lg);

    height:var(--af-icon-size-lg);

}


/*==========================================================
Circle
==========================================================*/

.af-icon-circle{

    border-radius:50%;

}


/*==========================================================
Rounded
==========================================================*/

.af-icon-rounded{

    border-radius:var(--af-radius);

}