Generate polyfill for the transition property

[erickskrauch]

The case:

.toggleIcon {
    position: absolute;
    inset-inline-end: $dropdownPadding;
    top: 16px;
    transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint

    &:hover {
        inset-inline-end: $dropdownPadding - 5px;
    }
}

Output:

.toggleIcon {
    position: absolute;
    inset-inline-end: $dropdownPadding;
    top: 16px;
    font-size: 17px;
    transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint

    &:hover {
        inset-inline-end: $dropdownPadding - 5px;
    }

    // No polyfill for the transition field!

    html[dir="ltr"] &:hover {
        right: $dropdownPadding - 5px;
    }

    html[dir="rtl"] &:hover {
        right: $dropdownPadding - 5px;
    }
}