@font-face {
    font-family: $font-name;
    src: url('fonts/debugpress.eot?#{$font-version}');
    src: url('fonts/debugpress.eot?#{$font-version}#iefix') format('embedded-opentype'),
    url('data:application/font-woff2;charset=utf-8;base64,#{$font_woff2}') format('woff2'),
    url('data:application/font-woff;charset=utf-8;base64,#{$font_woff}') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

i.#{$font-prefix-ctrl} {
    font: normal normal normal $font-size/1 $font-name;
    font-size: inherit;
    text-transform: none;
    display: inline-block;
    vertical-align: text-bottom;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    > .#{$font-prefix-ctrl} {
        line-height: inherit;
        vertical-align: bottom;
    }
}

a {
    > .#{$font-prefix-ctrl} {
        line-height: normal;
    }
}

/* Icons */
@each $icon, $deg in $rotate {
    .#{$font-prefix-ctrl}.#{$font-prefix}-#{$icon} {
        transform: rotate(#{$deg}deg);
    }
}

@each $icon, $char in $icons {
    .#{$font-prefix-ctrl}.#{$font-prefix}-#{$icon} {
        &:before {
            content: icon($char);
        }
    }
}

/* Full Width */
i.#{$font-prefix-ctrl} {
    &.#{$font-prefix-ctrl}-fw {
        width: 1.28571429em;
        text-align: center;
    }

    /* Sizes */
    &.#{$font-prefix-ctrl}-lg {
        font-size: 1.33333333em;
        line-height: 0.75em;
        vertical-align: -15%;
    }

    @for $i from 2 to 8 {
        &.#{$font-prefix-ctrl}-#{$i}x {
            font-size: #{$i}em;
        }
    }
}

/* Flip */
.#{$font-prefix-ctrl}-flip-horizontal {
    transform: scaleX(-1)
}

.#{$font-prefix-ctrl}-flip-vertical {
    transform: scaleY(-1)
}

.#{$font-prefix-ctrl}-flip-both,
.#{$font-prefix-ctrl}-flip-horizontal.#{$font-prefix-ctrl}-flip-vertical {
    transform: scale(-1)
}

/* Spin */
.#{$font-prefix-ctrl}-spin {
    animation: #{$font-prefix}-icon-spin 2s infinite linear;
}

@keyframes #{$font-prefix}-icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}