.tomato-arrow-link {
  --tomato-arrow-link-gap: 10px;
  --tomato-arrow-link-font-size: 24px;
  --tomato-arrow-link-font-weight: 500;
  --tomato-arrow-link-line-height: 1;
  --tomato-arrow-link-letter-spacing: 1.2px;
  --tomato-arrow-link-icon-size: 36px;
  --tomato-arrow-link-icon-bg: #d78773;
  --tomato-arrow-link-arrow-width: 10px;
  --tomato-arrow-link-arrow-height: 8px;
  --tomato-arrow-link-arrow-slide-distance: calc(var(--tomato-arrow-link-icon-size) * 0.92);
  display: inline-flex;
  align-items: center;
  gap: var(--tomato-arrow-link-gap);
  color: #1f1f1f;
  font-family: var(--tomato-copy-font);
  font-size: var(--tomato-arrow-link-font-size);
  font-weight: var(--tomato-arrow-link-font-weight);
  line-height: var(--tomato-arrow-link-line-height);
  letter-spacing: var(--tomato-arrow-link-letter-spacing);
  text-decoration: none;
}

.tomato-arrow-link:hover,
.tomato-arrow-link:focus-visible {
  text-decoration: underline;
}

.tomato-arrow-link__label {
  display: inline-block;
}

.tomato-arrow-link__icon {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  width: var(--tomato-arrow-link-icon-size);
  height: var(--tomato-arrow-link-icon-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tomato-arrow-link-icon-bg);
  flex: 0 0 auto;
  transition: opacity 180ms ease;
}

.tomato-arrow-link__icon::before,
.tomato-arrow-link__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tomato-arrow-link-arrow-width);
  height: var(--tomato-arrow-link-arrow-height);
  background: #fff;
  clip-path: polygon(0 37.5%, 62% 37.5%, 62% 0, 100% 50%, 62% 100%, 62% 62.5%, 0 62.5%);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tomato-arrow-link__icon::before {
  transform: translate(-50%, -50%) translateX(0);
}

.tomato-arrow-link__icon::after {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--tomato-arrow-link-arrow-slide-distance)));
}

.tomato-arrow-link:hover .tomato-arrow-link__icon,
.tomato-arrow-link:focus-visible .tomato-arrow-link__icon {
  opacity: 0.7;
}

.tomato-arrow-link:hover .tomato-arrow-link__icon::before,
.tomato-arrow-link:focus-visible .tomato-arrow-link__icon::before {
  transform: translate(-50%, -50%) translateX(var(--tomato-arrow-link-arrow-slide-distance));
}

.tomato-arrow-link:hover .tomato-arrow-link__icon::after,
.tomato-arrow-link:focus-visible .tomato-arrow-link__icon::after {
  transform: translate(-50%, -50%) translateX(0);
}

.tomato-arrow-link--md {
  --tomato-arrow-link-font-size: 20px;
  --tomato-arrow-link-line-height: 1.2;
  --tomato-arrow-link-letter-spacing: 1px;
  --tomato-arrow-link-icon-size: 28px;
  padding-block: 4px;
}

@media (max-width: 767px) {
  .tomato-arrow-link--lg {
    --tomato-arrow-link-font-size: 20px;
    --tomato-arrow-link-icon-size: 32px;
  }
}

@media (max-width: 720px) {
  .tomato-arrow-link--lg {
    --tomato-arrow-link-gap: 8px;
    --tomato-arrow-link-font-size: 16px;
    --tomato-arrow-link-letter-spacing: 0.04em;
    --tomato-arrow-link-icon-size: 28px;
    --tomato-arrow-link-arrow-width: 8px;
    --tomato-arrow-link-arrow-height: 8px;
  }

  .tomato-arrow-link--md {
    --tomato-arrow-link-gap: 8px;
    --tomato-arrow-link-font-size: 14px;
    --tomato-arrow-link-icon-size: 22px;
    --tomato-arrow-link-arrow-width: 8px;
    --tomato-arrow-link-arrow-height: 7px;
  }
}