.sortButton {
    align-items: center;
    background: none;
    border: none;
    color: var(--givewp-neutral-900);
    cursor: pointer;
    display: flex;
    padding: 0;

    .text {
        white-space: nowrap;
    }

    svg {
        display: block;
        transform: scale(112%);
        margin: 3px 0 3px 8px;

        &[data-sorting="true"] {
            >path {
                fill: var(--givewp-neutral-900) !important;
            }
        }

        >path {
            fill: var(--givewp-neutral-300);

            &:hover {
                fill: var(--givewp-neutral-900) !important;
            }
        }
    }
}