@layer components {
    .svgicon {
        display: inline-block;
        width: 1em;
        height: 1em;
        stroke-width: 0;
        stroke: currentColor;
        fill: currentColor;
    }

    .svgicon.icon-pdf {
        height: 22px;
        width: 18px;
    }

    .svgicon.icon-pdf-24 {
        height: 24px;
        width: 19px;
    }

    .svgicon.icon-pen {
        height: 30px;
        width: 30px;
    }

    .icon-table {
        width: 0.95833em;
    }

    /* Font Awesome's glyphs sit on the text baseline, an eighth of an em above their box's bottom. */
    .icon-external-link-alt,
    .icon-file-code,
    .icon-file-alt,
    .icon-file-excel,
    .icon-sort-amount-down,
    .icon-sort-amount-up {
        vertical-align: -0.125em;
    }

    .icon-external-link-alt {
        width: 1.125em;
    }

    .icon-file-code,
    .icon-file-alt,
    .icon-file-excel {
        width: 0.75em;
    }

    /* At these text sizes the glyphs' advance was rounded to whole pixels, which the button and the grid's columns were laid out on. */
    @media (max-width: 991.98px) {
        .icon-external-link-alt {
            width: 16px;
        }

        .sort-link .icon-sort-amount-down,
        .sort-link .icon-sort-amount-up {
            width: 12px;
        }
    }
}