.cfpro-inline-icon {
    --cfpro-icon-url: none;
    --cfpro-icon-color: currentColor;
    --cfpro-icon-hover-color: currentColor;
    --cfpro-icon-size: 16px;
    --cfpro-icon-rotate: 0deg;
    --cfpro-icon-scale-x: 1;
    --cfpro-icon-scale-y: 1;
    --cfpro-icon-offset-y: 0px;
    --cfpro-icon-vertical-align: middle;
    --cfpro-icon-box-width: auto;
    --cfpro-icon-box-height: auto;
    --cfpro-icon-padding: 0px;
    --cfpro-icon-box-color: transparent;
    --cfpro-icon-box-hover-color: transparent;
    --cfpro-icon-radius: 0px;
    --cfpro-icon-border: 0 solid transparent;
    --cfpro-icon-border-hover-color: transparent;
    --cfpro-icon-shadow: none;
    --cfpro-icon-space-before: 4px;
    --cfpro-icon-space-after: 4px;
    --cfpro-icon-margin-top: 0px;
    --cfpro-icon-margin-bottom: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: var(--cfpro-icon-vertical-align);
    margin-block-start: var(--cfpro-icon-margin-top);
    margin-block-end: var(--cfpro-icon-margin-bottom);
    margin-inline-start: var(--cfpro-icon-space-before);
    margin-inline-end: var(--cfpro-icon-space-after);
    font-size: 0;
    line-height: 1;
    max-width: 100%;
    position: relative;
}

.cfpro-inline-icon__link {
    color: inherit;
    display: inline-flex;
    line-height: 1;
    text-decoration: none !important;
}

.cfpro-inline-icon__box {
    align-items: center;
    background: var(--cfpro-icon-box-color);
    border: var(--cfpro-icon-border);
    border-radius: var(--cfpro-icon-radius);
    box-shadow: var(--cfpro-icon-shadow);
    box-sizing: border-box;
    display: inline-flex;
    height: var(--cfpro-icon-box-height);
    justify-content: center;
    min-height: calc(var(--cfpro-icon-size) + (var(--cfpro-icon-padding) * 2));
    min-width: calc(var(--cfpro-icon-size) + (var(--cfpro-icon-padding) * 2));
    padding: var(--cfpro-icon-padding);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    width: var(--cfpro-icon-box-width);
}

.cfpro-inline-icon__box::before {
    -webkit-mask: var(--cfpro-icon-url) center / contain no-repeat;
    background-color: var(--cfpro-icon-color);
    content: "";
    display: block;
    flex: 0 0 auto;
    height: var(--cfpro-icon-size);
    mask: var(--cfpro-icon-url) center / contain no-repeat;
    transform: translateY(var(--cfpro-icon-offset-y)) rotate(var(--cfpro-icon-rotate)) scale(var(--cfpro-icon-scale-x), var(--cfpro-icon-scale-y));
    transition: background-color .18s ease, transform .18s ease;
    width: var(--cfpro-icon-size);
}

.cfpro-inline-icon:hover .cfpro-inline-icon__box,
.cfpro-inline-icon.is-hover-preview .cfpro-inline-icon__box,
.is-hover-preview .cfpro-inline-icon .cfpro-inline-icon__box {
    background-color: var(--cfpro-icon-box-hover-color);
    border-color: var(--cfpro-icon-border-hover-color);
}

.cfpro-inline-icon:hover .cfpro-inline-icon__box::before,
.cfpro-inline-icon.is-hover-preview .cfpro-inline-icon__box::before,
.is-hover-preview .cfpro-inline-icon .cfpro-inline-icon__box::before {
    background-color: var(--cfpro-icon-hover-color);
}