/* === Icons === */
i.icon {
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;
    &.icon-f7 {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-f7.png");
    }
    &.icon-form-name {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-name.png");
    }
    &.icon-form-password {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-password.png");
    }
    &.icon-form-email {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-email.png");
    }
    &.icon-form-calendar {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-calendar.png");
    }
    &.icon-form-tel {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-tel.png");
    }
    &.icon-form-gender {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-gender.png");
    }
    &.icon-form-toggle {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-toggle.png");
    }
    &.icon-form-comment {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-comment.png");
    }
    &.icon-form-settings {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-settings.png");
    }
    &.icon-form-url {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-url.png");
    }
    &.icon-next, &.icon-prev {
        width: 0.75rem;
        height: 0.75rem;
    }
    &.icon-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    &.icon-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    &.icon-plus {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 1.55rem;
        line-height: 1rem;
        text-align: center;
        font-weight: 100;
    }
}
