arrows.min.css

.arrow{position:relative}.arrow:not(.before)::after,.arrow.before::before,.arrow.after::after{--translate-x:0;--translate-y:0;--offset-reduction:.375;--offset-positive:2ch;--offset-negative:calc(var(--offset-positive) * -1);--offset-positive-reduced:calc(var(--offset-positive) * var(--offset-reduction));--offset-negative-reduced:calc(var(--offset-negative) * var(--offset-reduction));position:absolute;-webkit-transform:translate(var(--translate-x),var(--translate-y));transform:translate(var(--translate-x),var(--translate-y));-webkit-transition:0.175s -webkit-transform;transition:0.175s -webkit-transform;transition:0.175s transform;transition:0.175s transform,0.175s -webkit-transform}.arrow:not(.before).static::after,.arrow.before.static::before,.arrow.after.static::after{-webkit-transform:none;transform:none}.arrow.before::before{left:var(--offset-negative);padding-right:var(--offset-positive)}.arrow.before.up::before{content:"\2191"}.arrow.before.up:hover::before,.arrow.before.up:focus::before{--translate-y:var(--offset-negative-reduced);margin-bottom:var(--offset-negative-reduced);padding-bottom:var(--offset-positive-reduced)}.arrow.before.up.left::before{content:"\2196"}.arrow.before.up.right::before{content:"\2197"}.arrow.before.up.right:hover::before,.arrow.before.up.right:focus::before{margin-left:var(--offset-negative-reduced);padding-left:var(--offset-positive-reduced)}.arrow.before.down::before{content:"\2193"}.arrow.before.down:hover::before,.arrow.before.down:focus::before{--translate-y:var(--offset-positive-reduced);margin-top:var(--offset-negative-reduced);padding-top:var(--offset-positive-reduced)}.arrow.before.down.left::before{content:"\2199"}.arrow.before.down.left:hover::before,.arrow.before.down.left:focus::before{margin-right:var(--offset-negative-reduced)}.arrow.before.down.right::before{content:"\2198"}.arrow.before.down.right:hover::before,.arrow.before.down.right:focus::before{margin-right:var(--offset-negative-reduced);padding-right:var(--offset-positive-reduced)}.arrow.before.left::before{content:"\2190"}.arrow.before.left:hover::before,.arrow.before.left:focus::before{--translate-x:var(--offset-negative-reduced)}.arrow.before.right::before{content:"\2192"}.arrow.before.right:hover::before,.arrow.before.right:focus::before{--translate-x:var(--offset-positive-reduced);margin-left:var(--offset-negative-reduced);padding-left:var(--offset-positive-reduced)}.arrow:not(.before)::after,.arrow.after::after{right:var(--offset-negative);padding-left:var(--offset-positive)}.arrow:not(.before).up::after,.arrow.after.up::after{content:"\2191"}.arrow:not(.before).up:hover::after,.arrow:not(.before).up:focus::after,.arrow.after.up:hover::after,.arrow.after.up:focus::after{--translate-y:var(--offset-negative-reduced);margin-bottom:var(--offset-negative-reduced);padding-bottom:var(--offset-positive-reduced)}.arrow:not(.before).up.left::after,.arrow.after.up.left::after{content:"\2196"}.arrow:not(.before).up.left:hover::after,.arrow:not(.before).up.left:focus::after,.arrow.after.up.left:hover::after,.arrow.after.up.left:focus::after{--translate-y:var(--offset-negative-reduced);margin-right:var(--offset-negative-reduced);padding-right:var(--offset-positive-reduced)}.arrow:not(.before).up.right::after,.arrow.after.up.right::after{content:"\2197"}.arrow:not(.before).down::after,.arrow.after.down::after{content:"\2193"}.arrow:not(.before).down:hover::after,.arrow:not(.before).down:focus::after,.arrow.after.down:hover::after,.arrow.after.down:focus::after{--translate-y:var(--offset-positive-reduced);margin-top:var(--offset-negative-reduced);padding-top:var(--offset-positive-reduced)}.arrow:not(.before).down.left::after,.arrow.after.down.left::after{content:"\2199"}.arrow:not(.before).down.right::after,.arrow.after.down.right::after{content:"\2198"}.arrow:not(.before).left::after,.arrow.after.left::after{content:"\2190"}.arrow:not(.before).left:hover::after,.arrow:not(.before).left:focus::after,.arrow.after.left:hover::after,.arrow.after.left:focus::after{--translate-x:var(--offset-negative-reduced);margin-right:var(--offset-negative-reduced);padding-right:var(--offset-positive-reduced)}.arrow:not(.before).right::after,.arrow.after.right::after{content:"\2192"}.arrow:not(.before).right:hover::after,.arrow:not(.before).right:focus::after,.arrow.after.right:hover::after,.arrow.after.right:focus::after{--translate-x:var(--offset-positive-reduced)}.arrow.before.up.left:hover::before,.arrow.before.up.left:focus::before,.arrow.before.up.right:hover::before,.arrow.before.up.right:focus::before,.arrow.before.down.left:hover::before,.arrow.before.down.left:focus::before,.arrow.before.down.right:hover::before,.arrow.before.down.right:focus::before{--offset-reduction:.25}.arrow:not(.before).up.left:hover::after,.arrow:not(.before).up.left:focus::after,.arrow:not(.before).up.right:hover::after,.arrow:not(.before).up.right:focus::after,.arrow:not(.before).down.left:hover::after,.arrow:not(.before).down.left:focus::after,.arrow:not(.before).down.right:hover::after,.arrow:not(.before).down.right:focus::after,.arrow.after.up.left:hover::after,.arrow.after.up.left:focus::after,.arrow.after.up.right:hover::after,.arrow.after.up.right:focus::after,.arrow.after.down.left:hover::after,.arrow.after.down.left:focus::after,.arrow.after.down.right:hover::after,.arrow.after.down.right:focus::after{--offset-reduction:.25}