.link-component {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--button);
  text-decoration: none;
  color: var(--burnt-orange);
}

.link-text {
  font: var(--button);
  color: var(--burnt-orange);
  white-space: nowrap;
}

.link-component .link-arrow svg {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.link-component .link-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.link-component:hover {
  color: var(--burnt-orange);
}

.link-component:hover .link-text {
  color: var(--burnt-orange);
}

.link-component:hover .link-arrow svg path {
  fill: var(--burnt-orange);
}

.link-component:hover .link-arrow svg {
  transform: rotate(-45deg);
}

.link-component:focus,
.link-component:focus-visible {
  outline: none;
}

.link-component:focus .link-arrow svg path {
  fill: var(--burnt-orange);
}