%icon {
    vertical-align: middle;
}

.inline-icon.inline-icon-left {
    padding-right: 5px;
}
.inline-icon.inline-icon-right {
    padding-left: 5px;
}

.padded-icon-left {
    padding-right: 5px;
}
.padded-icon-right {
    padding-left: 5px;
}

.icon-letter:before {
    @extend %icon;
    font-icon: 150% url('letter.svg');
    vertical-align: -7px;
}

.icon-pencil:before {
    @extend %icon;
    font-icon: 130% url('pencil.svg');
    vertical-align: -4px;
}

.icon-trash:before {
    @extend %icon;
    font-icon: url('trash.svg');
    vertical-align: -3px;
}

.icon-arrow-down:before {
    @extend %icon;
    font-icon: url('arrow-down.svg');
    vertical-align: -1px;
}

.icon-arrow-up:before {
    @extend %icon;
    font-icon: url('arrow-up.svg');
    vertical-align: -1px;
}

.icon-arrow-right:before {
    @extend %icon;
    font-icon: url('arrow-right.svg');
    vertical-align: -3px;
}

.icon-arrow-left:before {
    @extend %icon;
    font-icon: url('arrow-left.svg');
    vertical-align: -3px;
}

.button.button-unstyled {
    &.icon-arrow-left,
    &.icon-arrow-right {
        &::before {
            vertical-align: -1px;
        }
    }
}

.icon-menu:before {
    @extend %icon;
    font-icon: url('menu.svg');
    vertical-align: -3px;
}

.icon-fill:before {
    @extend %icon;
    font-icon: url('fill.svg');
    vertical-align: -3px;
}

.icon-print:before {
    @extend %icon;
    font-icon: url('print.svg');
    vertical-align: -3px;
}

.icon-download:before {
    @extend %icon;
    font-icon: url('download.svg');
    vertical-align: -3px;
}

.icon-email:before {
    @extend %icon;
    font-icon: url('email.svg');
    vertical-align: -3px;
}

.icon-paper-plane:before {
    @extend %icon;
    font-icon: url('paper-plane.svg');
    vertical-align: -3px;
}

.icon-delivery-truck:before {
    @extend %icon;
    font-icon: url('delivery-truck.svg');
    vertical-align: -3px;
}

.icon-i18n:before {
    @extend %icon;
    font-icon: 200% url('i18n.svg');
    vertical-align: -10px;
}

.icon-close:before {
    @extend %icon;
    font-icon: 200% url('close.svg');
    vertical-align: -3px;
}

.icon-json-document:before {
    @extend %icon;
    font-icon: 120% url('json-document.svg');
    vertical-align: -2px;
}

.icon-rss:before {
    @extend %icon;
    font-icon: url('rss.svg');
}

.icon-mastodon:before {
    @extend %icon;
    font-icon: url('mastodon.svg');
}

.icon-github:before {
    @extend %icon;
    font-icon: url('github.svg');
}

.icon-matrix:before {
    @extend %icon;
    font-icon: url('matrix.svg');
}

.icon-code:before {
    @extend %icon;
    font-icon: 120% url('code.svg');
    vertical-align: -4px;
}

.icon-external:before {
    @extend %icon;
    font-icon: url('external.svg');
}

.icon-check-badge:before {
    @extend %icon;
    font-icon: url('check-badge.svg');
    vertical-align: -2px;
}

.icon-question-badge:before {
    @extend %icon;
    font-icon: url('question-badge.svg');
    vertical-align: -2px;
}

.icon-question-mark:before {
    @extend %icon;
    font-icon: url('question-mark.svg');
    vertical-align: -2px;
}

.icon-id-card:before {
    @extend %icon;
    font-icon: url('id-card.svg');
    vertical-align: -1px;
}

.icon-post-person:before {
    @extend %icon;
    font-icon: url('post-person.svg');
    vertical-align: -1px;
}

.icon-fax:before {
    @extend %icon;
    font-icon: url('fax.svg');
    vertical-align: -1px;
}

.icon-plus-circle:before {
    @extend %icon;
    font-icon: url('plus-circle.svg');
    vertical-align: -3px;
}

.icon-close-circle:before {
    @extend %icon;
    font-icon: url('close-circle.svg');
    vertical-align: -2px;
}

.icon-star:before {
    @extend %icon;
    font-icon: url('star.svg');
}

.icon-access:before {
    @extend %icon;
    vertical-align: -3px;
    font-icon: url('access.svg');
}

.icon-rectification:before {
    @extend %icon;
    font-icon: url('rectification.svg');
    vertical-align: -3px;
}

.icon-erasure:before {
    @extend %icon;
    font-icon: url('erasure.svg');
    vertical-align: -3px;
}

.icon-objection:before {
    @extend %icon;
    font-icon: url('objection.svg');
    vertical-align: -2px;
}

.icon-person:before {
    @extend %icon;
    font-icon: url('person.svg');
    vertical-align: -2px;
}

.icon-factory:before {
    @extend %icon;
    font-icon: url('factory.svg');
    vertical-align: -2px;
}

.icon-settings:before {
    @extend %icon;
    font-icon: url('settings.svg');
}

.icon-conversation:before {
    @extend %icon;
    font-icon: url('conversation.svg');
}

.icon-ellipsis:before {
    @extend %icon;
    font-icon: 140% url('ellipsis.svg');
}

.icon-check-mark:before {
    @extend %icon;
    font-icon: url('check-mark.svg');
    vertical-align: -2px;
}

.icon-gavel:before {
    @extend %icon;
    font-icon: url('gavel.svg');
    vertical-align: -2px;
}

.icon-paper-plane-letter:before {
    @extend %icon;
    font-icon: url('paper-plane-letter.svg');
    vertical-align: -2px;
}
