| 1 | interface Colors {
|
| 2 | mongeral: string;
|
| 3 | regalBlue: string;
|
| 4 | line: string;
|
| 5 | white: string;
|
| 6 | }
|
| 7 |
|
| 8 | export default (Colors: Colors) => (svg: string) => `
|
| 9 | background-size: 100% 200%;
|
| 10 | background-image: linear-gradient(to bottom, ${Colors.mongeral} 50%, ${Colors.regalBlue} 50%);
|
| 11 | ${svg};
|
| 12 |
|
| 13 | &:hover {
|
| 14 | background-position: 0 -100%;
|
| 15 |
|
| 16 | .switch-arrow-elements.one {
|
| 17 | stroke: ${Colors.line};
|
| 18 | transform: translateX(-1px);
|
| 19 | }
|
| 20 |
|
| 21 | .switch-arrow-elements.two {
|
| 22 | stroke: ${Colors.white};
|
| 23 | transform: translateX(5px);
|
| 24 | }
|
| 25 | }
|
| 26 |
|
| 27 | .down {
|
| 28 | transform: rotate(90deg);
|
| 29 | vertical-align: middle;
|
| 30 | }
|
| 31 | `;
|