/*
Tel Icons

These are our telephone icons.

.icon-tel--home-std - Home
.icon-tel--work-std - Work
.icon-tel--mobile-std - Mobile
.icon-tel--fax-std - Fax

Markup:
<span class="icon-tel {{modifier_class}}"></span>

Name: iconTel

Styleguide 1.3.2
*/

/************************************************
TELEPHONE NUMBERS
*************************************************/
.icon-tel {
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

.tel {
    line-height: 18px;
    padding-left: 20px;
    background-size: 14px;
    background-repeat: no-repeat;
}

input.icon-tel,
input.tel {
    background-position: 10px 13px;
}

// De01-2050 Phone Field
.field-group input.tel {
    margin-bottom: 5px;
}

input.tel, #main input.tel {
    background-color: #fff;
    padding-left: 35px;
}
// End De01-2050 Phone Field

// when using the icons without input
.icon-tel--home,
.icon-tel--home-std {
    background-image: url("@{icons}tel-home-grey.svg");
}
.icon-tel--mobile,
.icon-tel--mobile-std,
.icon-tel--mobile-help {
    background-image: url("@{icons}tel-mobile-grey.svg");
}
.icon-tel--work,
.icon-tel--work-std {
    background-image: url("@{icons}tel-work-grey.svg");
}
.icon-tel--fax,
.icon-tel--fax-std {
    background-image: url("@{icons}tel-fax-grey.svg");
}