@mixin input-group-suf {
    border-radius: 0 $input-group-border-radius $input-group-border-radius 0;
    min-width: $input-group-suf-width;

    > div {
        animation: rotate-from-45-to-0 350ms forwards;
        cursor: pointer;
        height: 100%;
        position: relative;
        transform: rotate(45deg);
        width: 100%;

        @keyframes rotate-from-45-to-0 {
            0% {
                transform: rotate(45deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        > span {
            background: $input-group-suf-burger-menu-color;
            border-radius: 5px;
            display: inline-block;
            height: 3px;
            left: 25%;
            position: absolute;
            width: 50%;
        }

        > span:first-child,
        > span:nth-child(4) {
            top: calc(50% - 1.5px);
        }

        > span:nth-child(2) {
            @include fade-in(350ms);
            top: calc(50% - 1.5px + 8px);
        }

        > span:nth-child(3) {
            @include fade-in(350ms);
            top: calc(50% - 1.5px - 8px);
        }

        > span:nth-child(4) {

            animation: rotate-from-45-to-0-and-fade-out 350ms forwards;
            opacity: 1;
            transform: rotate(45deg);

            @keyframes rotate-from-45-to-0-and-fade-out {
                0% {
                    opacity: 1;
                    transform: rotate(45deg);
                }

                100% {
                    opacity: 0;
                    transform: rotate(0deg);
                }
            }
        }
    }
}