.sxs-arrbtn {
    display: block;
    flex-shrink: 0;
    transition: background-color 400ms, transform 400ms;

    &--v-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--_size);
        height: var(--_size);
        background-color: $primaryClear;
        border-radius: 50%;
        transition: opacity $transitionDuration;
        --_size: 2.25rem;

        @include sm-wmin {
            --_size: 2.5rem;
        }

        &.sas-up:hover .icon {
            --_bef-t-o: center top;
            --_bef-ani: _follow-up;
            --_aft-t-o: center bottom;
            --_aft-ani: _follow-down;
        }

        &.sas-down:hover .icon {
            --_bef-t-o: center bottom;
            --_bef-ani: _follow-down;
            --_aft-t-o: center top;
            --_aft-ani: _follow-up;
        }

        &.sas-left:hover .icon {
            --_bef-t-o: center left;
            --_bef-ani: _follow-left;
            --_aft-t-o: center right;
            --_aft-ani: _follow-right;
        }

        &.sas-right:hover .icon {
            --_bef-t-o: center right;
            --_bef-ani: _follow-right;
            --_aft-t-o: center left;
            --_aft-ani: _follow-left;
        }

        &:hover:not(.disabled) .icon {

            &::before,
            &::after {
                animation: ease-out 500ms infinite;
            }

            &::before {
                transform-origin: var(--_bef-t-o);
                animation-name: var(--_bef-ani);
            }

            &::after {
                transform-origin: var(--_aft-t-o);
                animation-direction: reverse;
                animation-name: var(--_aft-ani);
            }
        }

        &.sas-up .icon::after {
            content: "\e90c";
        }

        &.sas-down .icon::after {
            content: "\e90b";
        }

        &.sas-left .icon::after {
            content: "\e90e";
        }

        &.sas-right .icon::after {
            content: "\e90d";
        }

        .icon::after {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            height: 1em;
            width: 1em;
        }

        &[aria-disabled="true"] {
            opacity: .3;
            cursor: default;
        }
    }

    // &--v-2 {
    //     padding: calc(8px + .2rem) calc(2px + .25rem);
    //     background-color: rgba($duller, .5);
    //     border-radius: 5px;

    //     .icon {
    //         color: #FFF;
    //         font-size: calc(18px + 1.4rem);
    //     }
    // }

    &__con0 {
        overflow: hidden;
    }

    .icon {
        font-size: calc(var(--_size) * .4);
        transition: transform 400ms;

        &:first-child {
            transform: translateX(0) scale(0);
        }

        &:last-child {
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    // &.sas-left {
    //     .icon {
    //         transform-origin: right;
    //     }

    //     &:hover {
    //         .icon:first-child {
    //             transform: translateX(0) scale(1);
    //         }

    //         .icon:last-child {
    //             transform: translateX(-100%) scale(0);
    //         }
    //     }
    // }

    // &.sas-right {
    //     .icon {
    //         transform-origin: left;
    //     }

    //     &:hover {
    //         .icon:first-child {
    //             transform: translateX(0) scale(1);
    //         }

    //         .icon:last-child {
    //             transform: translateX(100%) scale(0);
    //         }
    //     }
    // }

    // &.sas-up {
    //     .icon {
    //         transform-origin: bottom;
    //     }

    //     &:hover {
    //         .icon:first-child {
    //             transform: translateY(0) scale(1);
    //         }

    //         .icon:last-child {
    //             transform: translateY(-100%) scale(0);
    //         }
    //     }
    // }

    // &.sas-down {
    //     .icon {
    //         transform-origin: top;
    //     }

    //     &:hover {
    //         .icon:first-child {
    //             transform: translateY(0) scale(1);
    //         }

    //         .icon:last-child {
    //             transform: translateY(100%) scale(0);
    //         }
    //     }
    // }

    // &:hover {
    //     transform: scale(.94);
    // }

    // &:active {
    //     transform: scale(.9);
    //     transition-duration: 150ms;
    // }
}