/*--------------------------------------------------------------
Icons - SVG Mask-based Icons
--------------------------------------------------------------*/

/* Base icon styles - applies to all icon classes */
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: middle;
}

/* Remove old Fontello pseudo-elements */
[class^="icon-"]:before,
[class*=" icon-"]:before {
    content: none !important;
    font-family: inherit !important;
}

/* Size variants */
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }


/*--------------------------------------------------------------
UI Icons (Material Icons)
--------------------------------------------------------------*/

.icon-star {
    mask-image: url('../icons/star.svg');
    -webkit-mask-image: url('../icons/star.svg');
}


.icon-chevron-down {
    mask-image: url('../icons/chevron_down.svg');
    -webkit-mask-image: url('../icons/chevron_down.svg');
}

.icon-chevron-up {
    mask-image: url('../icons/chevron_up.svg');
    -webkit-mask-image: url('../icons/chevron_up.svg');
}

.icon-arrow-down {
    mask-image: url('../icons/arrow_down.svg');
    -webkit-mask-image: url('../icons/arrow_down.svg');
}

.icon-arrow-up {
    mask-image: url('../icons/arrow_up.svg');
    -webkit-mask-image: url('../icons/arrow_up.svg');
}

.icon-arrow-forward {
    mask-image: url('../icons/arrow_forward.svg');
    -webkit-mask-image: url('../icons/arrow_forward.svg');
}

.icon-arrow-outward {
    mask-image: url('../icons/arrow_outward.svg');
    -webkit-mask-image: url('../icons/arrow_outward.svg');
}

.icon-asterisk {
    mask-image: url('../icons/asterisk.svg');
    -webkit-mask-image: url('../icons/asterisk.svg');
}

.icon-calendar {
    mask-image: url('../icons/calendar.svg');
    -webkit-mask-image: url('../icons/calendar.svg');
}

.icon-call-made {
    mask-image: url('../icons/call_made.svg');
    -webkit-mask-image: url('../icons/call_made.svg');
}

.icon-call {
    mask-image: url('../icons/call.svg');
    -webkit-mask-image: url('../icons/call.svg');
}

.icon-chat-bubble {
    mask-image: url('../icons/chat_bubble.svg');
    -webkit-mask-image: url('../icons/chat_bubble.svg');
}

.icon-check-small {
    mask-image: url('../icons/check_small.svg');
    -webkit-mask-image: url('../icons/check_small.svg');
}

.icon-check {
    mask-image: url('../icons/check.svg');
    -webkit-mask-image: url('../icons/check.svg');
}

.icon-chevron {
    mask-image: url('../icons/chevron.svg');
    -webkit-mask-image: url('../icons/chevron.svg');
}

.icon-location {
    mask-image: url('../icons/location.svg');
    -webkit-mask-image: url('../icons/location.svg');
}

.icon-mail {
    mask-image: url('../icons/mail.svg');
    -webkit-mask-image: url('../icons/mail.svg');
}

.icon-schedule {
    mask-image: url('../icons/schedule.svg');
    -webkit-mask-image: url('../icons/schedule.svg');
}

/*--------------------------------------------------------------
Social Icons
--------------------------------------------------------------*/

.icon-facebook {
    mask-image: url('../icons/facebook.svg');
    -webkit-mask-image: url('../icons/facebook.svg');
}

.icon-google {
    mask-image: url('../icons/google.svg');
    -webkit-mask-image: url('../icons/google.svg');
}

.icon-houzz {
    mask-image: url('../icons/houzz.svg');
    -webkit-mask-image: url('../icons/houzz.svg');
}

.icon-instagram {
    mask-image: url('../icons/instagram.svg');
    -webkit-mask-image: url('../icons/instagram.svg');
}

.icon-linkedin {
    mask-image: url('../icons/linkedin.svg');
    -webkit-mask-image: url('../icons/linkedin.svg');
}

.icon-x-twitter {
    mask-image: url('../icons/x-twitter.svg');
    -webkit-mask-image: url('../icons/x-twitter.svg');
}

.icon-yelp {
    mask-image: url('../icons/yelp.svg');
    -webkit-mask-image: url('../icons/yelp.svg');
}

.icon-youtube {
    mask-image: url('../icons/youtube.svg');
    -webkit-mask-image: url('../icons/youtube.svg');
}

/*--------------------------------------------------------------
Square Social Icons
--------------------------------------------------------------*/

.icon-square-facebook {
    mask-image: url('../icons/square-facebook.svg');
    -webkit-mask-image: url('../icons/square-facebook.svg');
}

.icon-square-instagram {
    mask-image: url('../icons/square-instagram.svg');
    -webkit-mask-image: url('../icons/square-instagram.svg');
}

.icon-square-linkedin {
    mask-image: url('../icons/square-linkedin.svg');
    -webkit-mask-image: url('../icons/square-linkedin.svg');
}

.icon-square-x-twitter {
    mask-image: url('../icons/square-x-twitter.svg');
    -webkit-mask-image: url('../icons/square-x-twitter.svg');
}

.icon-square-youtube {
    mask-image: url('../icons/square-youtube.svg');
    -webkit-mask-image: url('../icons/square-youtube.svg');
}

/*--------------------------------------------------------------
Legacy name mappings (for backward compatibility during transition)
--------------------------------------------------------------*/

/* Map old Fontello names to new icons */
.icon-phone { 
    mask-image: url('../icons/call.svg');
    -webkit-mask-image: url('../icons/call.svg');
}

.icon-clock {
    mask-image: url('../icons/schedule.svg');
    -webkit-mask-image: url('../icons/schedule.svg');
}

.icon-down-dir,
.icon-down-open {
    mask-image: url('../icons/arrow_drop_down.svg');
    -webkit-mask-image: url('../icons/arrow_drop_down.svg');
}

.icon-up-open {
    mask-image: url('../icons/arrow_drop_up.svg');
    -webkit-mask-image: url('../icons/arrow_drop_up.svg');
}

.icon-right-dir,
.icon-right-open {
    mask-image: url('../icons/arrow_forward.svg');
    -webkit-mask-image: url('../icons/arrow_forward.svg');
}

.icon-left-dir,
.icon-left-open {
    mask-image: url('../icons/arrow_backward.svg');
    -webkit-mask-image: url('../icons/arrow_backward.svg');
}

.icon-twitter {
    mask-image: url('../icons/x-twitter.svg');
    -webkit-mask-image: url('../icons/x-twitter.svg');
}

.icon-chat {
    mask-image: url('../icons/chat_bubble.svg');
    -webkit-mask-image: url('../icons/chat_bubble.svg');
}

.icon-ok {
    mask-image: url('../icons/check.svg');
    -webkit-mask-image: url('../icons/check.svg');
}