.arrow-container{--arrow-container-size:100px;--arrow-container-padding:5px;--arrow-container-radius:15px;--arrow-container-background-color:#3d3d3d44;--arrow-gap:5px;--arrow-width:5px;--arrow-height:80px;--arrow-color:#fff;--head-width:30px;--head-height:40px;--head-radius:15px;--body-width:5px;width:var(--arrow-container-size);height:var(--arrow-container-size);padding:var(--arrow-container-padding);background-color:var(--arrow-container-background-color);border-radius:var(--arrow-container-radius);gap:var(--arrow-gap);display:flex;flex-direction:column;align-items:center;justify-content:center}.arrow-container.down{transform:rotate(180deg)}.arrow-container.up{transform:rotate(0deg)}.arrow-container.right{transform:rotate(90deg)}.arrow-container.left{transform:rotate(-90deg)}.arrowhead{width:var(--head-width);height:var(--head-height);clip-path:polygon(0 100%,50% 0,100% 100%)}.arrowbody,.arrowhead{background-color:var(--arrow-color)}.arrowbody{width:var(--body-width);height:100%}