// arrows
.sw-ff19 {
    &--arrow {
        display: block;
        position: relative;
        padding-bottom: .4em;
        font-size: .625rem;
        padding-right: 2rem;
        min-height: 1.4em;
        font-weight: bold;
        &:before {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: 2px;
            border-top: 2px solid;
            border-radius: 2px;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: 1px;
            right: -1px;
            border-right: 2px solid;
            transform-origin: bottom right;
            transform: rotate(-50deg);
            height: $spacer * 1.5;
            border-radius: 2px;
        }
    }

    // variants
    &--arrow-sm {
        padding-right: 1.5rem;
        min-height: 1em;
        &:before {
            border-top-width: 1px;
            transform: scaleY(.8);
        }
        &:after {
            bottom: 1px;
            right: 0;
            border-right-width: 1px;
            transform: rotate(-50deg);
            height: $spacer * .67;
        }
    }
    &--arrow-inline {
        display: inline-block;
        width: auto;
    }
    &--arrow-reverse {
        display: block;
        position: relative;
        padding-left: 2rem;
        &:before {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            border-radius: 2px;
            border-top: 2px solid;
            border-radius: 2px;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: 1px;
            left: -1px;
            border-left: 2px solid;
            transform-origin: bottom left;
            transform: rotate(50deg);
            height: $spacer * 1.5;
            border-radius: 2px;
        }
    }
}


// transition
.btn,
.sw-ff19-booths--card--link {
    .sw-ff19--arrow {
        transition: transform .3s $easeOutQuint;
    }
    &:hover,
    &:focus {
        .sw-ff19--arrow {
            transform: translate3d(3px,0,0);
        }
        .sw-ff19--arrow-reverse {
            transform: translate3d(-3px,0,0);
        }
    }
}