$glyph-dark: var(--gray-700);
$glyph-dark-inverse: var(--gray-800);
$glyph-light: var(--white);

.Glyph {
    fill: $glyph-dark;
    height: 16px;
    width: 16px;

    .GlyphStrokeDark {
        stroke: $glyph-dark;
    }

    .GlyphStrokeLight {
        stroke: $glyph-light;
    }

    .GlyphFillLight {
        fill: $glyph-light;
    }

    .GlyphFillDark {
        fill: $glyph-dark;
    }

    &.inverse {
        fill: $glyph-light;

        .GlyphStrokeLight {
            stroke: $glyph-dark-inverse;
        }

        .GlyphStrokeDark {
            stroke: $glyph-light;
        }

        .GlyphFillLight {
            fill: $glyph-dark-inverse;
        }

        .GlyphFillDark {
            fill: $glyph-light;
        }
    }
}

.SortGlyph,
.SortDownGlyph,
.SortUpGlyph {
    height: 12px;
    width: 12px;
}