/* ==========================================================
   CITYGO ICON SYSTEM V1
========================================================== */

.cg-icon {
    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--cg-icon);
}

.cg-icon svg {
    width: 100%;
    height: 100%;

    display: block;

    stroke: currentColor;
    fill: none;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: var(--cg-transition);
}

/* Sizes */

.cg-icon--xs {
    width: 14px;
    height: 14px;
}

.cg-icon--sm {
    width: 18px;
    height: 18px;
}

.cg-icon--md {
    width: 24px;
    height: 24px;
}

.cg-icon--lg {
    width: 34px;
    height: 34px;
}

.cg-icon--xl {
    width: 46px;
    height: 46px;
}

.cg-icon--2xl {
    width: 56px;
    height: 56px;
}

/* Colors */

.cg-icon--primary {
    color: var(--cg-primary);
}

.cg-icon--light {
    color: var(--cg-primary-light);
}

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

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

.cg-icon--warning {
    color: var(--cg-warning);
}

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

/* Hover helpers */

a:hover .cg-icon,
button:hover .cg-icon {
    color: var(--cg-icon-hover);
}

a:hover .cg-icon svg,
button:hover .cg-icon svg {
    transform: scale(1.06);
}