interface Colors {
  lochmara: string;
  regalBlue: string;
}

export default (Colors: Colors) => (svg: string) => `
  background-size: 200% 100%;
  background-image: linear-gradient(to right, ${Colors.lochmara} 50%, ${Colors.regalBlue} 50%);
  ${svg};

  svg {
    margin-left: -16px;
    margin-right: 6px;
  }

  &:hover {
    background-position: 100%;
    .link-arrow-elements { transform: translateX(5px); }
  }

  .mirrored { transform: rotate(180deg); }
`;