import { trigger, transition, style, animate, keyframes } from '@angular/animations';

export const topRightInOut = trigger('topRightInOut', [
  transition(':enter', [
    style({
      width: '0',
      height: '0',
      marginLeft: 'auto',
      overflow: 'hidden',
      opacity: '0',
    }),
    animate(300, style({ width: '100%', height: '100%', opacity: '1', borderRadius: '0%' })),
  ]),
  transition('* => out', [
    style({
      width: '100%',
      height: '100%',
      marginLeft: 'auto',
      opacity: '1',
      borderRadius: '0%',
      overflow: 'hidden',
    }),
    animate(
      300,
      style({
        width: '0',
        height: '0',
        overflow: 'hidden',
        opacity: '0',
      })
    ),
  ]),
]);

export const slideIn = trigger('slideIn', [
  transition(':enter', [
    style({
      transform: 'translateX(100%)',
      marginLeft: 'auto',
      opacity: '0',
      height: '100%',
    }),
    animate(
      430,
      keyframes([
        style({
          opacity: '1',
          transform: 'translateX(65%)',
          offset: 0.35,
        }),
        style({
          transform: 'translateX(0)',
          height: '100%',
          opacity: '1',
          offset: 1,
        }),
      ])
    ),
  ]),
  transition('* => out', [
    style({
      transform: 'translateX(0)',
      height: '100%',
      opacity: '1',
      marginLeft: 'auto',
    }),
    animate(
      430,
      keyframes([
        style({
          opacity: '1',
          transform: 'translateX(65%)',
          offset: 0.65,
        }),
        style({
          width: '0',
          height: '100%',
          transform: 'translateX(100%)',
          opacity: '0',
          offset: 1,
        }),
      ])
    ),
  ]),
]);
