.arrow-button {
  @apply transition;

  --height: 3rem;
  --arrow-width: 1.5rem;
  --arrow-gap: 4.5rem;

  --pad: calc(var(--height) / 2 + 0.5px);

  position: relative;
  height: var(--height);
  padding-block: 0.5rem;
  padding-left: 0.75rem;

  &::before {
    @apply absolute w-0 h-0 top-0 right-0 border-main-bg border-l-transparent;
    content: "";
    filter: opacity(0.8);
    transition: border-width 0.2s;

    --bg-transition: inherit;
    border-width: var(--pad) calc(var(--arrow-gap) * (1 - var(--bg-transition)))
      var(--pad) var(--arrow-width);
  }

  &::after {
    @apply absolute w-0 h-0 top-0 right-0 border-main-bg border-l-transparent;
    content: "";
    transition: border-width 0.2s;
    border-width: var(--pad) 0rem var(--pad) var(--arrow-width);
  }
}