.link-arrow {
    --pos: 0;
    --pos-hover: 1em;
    --ease: var(--ease-out-quad);
    --time: .4s;
    outline: 0;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    padding-right: var(--pos-hover);
}
.__accessible .link-arrow:focus {
    outline: 2px dashed !important;
}
.link-arrow:before {
    position: absolute;
    content: "→";
    display: block;
    top: 0;
    left: calc(-1 * var(--pos-hover));
    width: var(--pos-hover);
    height: 100%;
    transform: translateX(var(--pos));
    transition: transform var(--time) var(--ease);
}
.link-arrow > span {
    display: block;
    transform: translateX(var(--pos));
    transition: transform var(--time) var(--ease);
}
.link-arrow:hover {
    --pos: var(--pos-hover);
}
.link-arrow.--active, .link-arrow.__link-active {
    --pos: var(--pos-hover);
    pointer-events: none;
}
@media (hover: none) {
    .link-arrow {
        overflow: visible;
    }
    .link-arrow:before {
        opacity: 0;
        transform: translateX(0);
    }
    .link-arrow > span {
        transform: translateX(0);
    }
    .link-arrow:hover:before {
        opacity: 1;
    }
}