/* Круг как у stat-arrow: белая стрелка по центру, фон круга — только orange или black */
/* <i class="arrow-icon arrow-icon--orange" aria-hidden="true"></i> */
.arrow-icon {
    display: inline-block;
    width: var(--arrow-icon-size, 30px);
    height: var(--arrow-icon-size, 30px);
    flex-shrink: 0;
    vertical-align: middle;
}

.arrow-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('../../img/arrow-up-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--arrow-icon-glyph, 12px) var(--arrow-icon-glyph, 12px);
}

.arrow-icon--orange::before {
    background-color: var(--orange);
}

.arrow-icon--black::before {
    background-color: var(--black);
}

/* Кнопки «Подробнее» в услугах: круг rgba(46,46,46), стрелка как в mark-иконках */
.btn-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-more-icon-size, 34px);
    height: var(--btn-more-icon-size, 34px);
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(46, 46, 46, 1);
}

.btn-more-icon::after {
    content: '';
    width: var(--btn-more-icon-glyph, 12px);
    height: var(--btn-more-icon-glyph, 12px);
    background: url('../../img/arrow-up-right.svg') center / contain no-repeat;
}