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

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

  &:hover {
    background-position: 0 -100%;

    .switch-arrow-elements.one {
      stroke: ${Colors.line};
      transform: translateX(-1px);
    }

    .switch-arrow-elements.two {
      stroke: ${Colors.white};
      transform: translateX(5px);
    }
  }

  .down {
    transform: rotate(90deg);
    vertical-align: middle;
  }
`;