.GlyphIcon {
    color: var(--glyphs-default, var(--gray-600));

    .btn & {
        color: currentColor;
    }

    button:disabled & {
        opacity: 0.5;
    }

    path,
    rect {
        fill: currentColor;
    }

    mask path {
        fill: unset;
    }

    &.inverse {
        color: var(--white);
    }

    &.SortDefaultGlyphIcon path {
        fill: var(--glyphs-disabled, var(--gray-300));
    }

    &.SortAscendingGlyphIcon {
        path:nth-child(1) {
            fill: var(--glyphs-disabled, var(--gray-300));
        }

        path:nth-child(2) {
            fill: var(--glyphs-default, var(--gray-500));
        }
    }

    &.SortDescendingGlyphIcon {
        path:nth-child(1) {
            fill: var(--glyphs-default, var(--gray-500));
        }

        path:nth-child(2) {
            fill: var(--glyphs-disabled, var(--gray-300));
        }
    }

    &.TrendingLowGlyphIcon {
        path:nth-child(2) {
            fill: var(--gray-200);
        }

        path:nth-child(3) {
            fill: var(--gray-200);
        }
    }

    &.TrendingMediumGlyphIcon {
        path:nth-child(3) {
            fill: var(--gray-200);
        }
    }
}