@import 'element:ef-notification-tray';
@import 'element:ef-icon';
@import '../shared-styles/shapes';
@import '../responsive';

:host {
  .touch-action();
  @bar-height: var(--bar-height, 3em);
  @animation-duration: (@global-transition-duration * 2);

  perspective: 2000px;
  position: relative;
  height: @bar-height;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color, @button-text-color);
  animation: notification-open @animation-duration ease forwards;
  user-select: none;

  [part='container'] {
    height: @bar-height;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: @panel-padding;
    background-color: var(--background-color, @scheme-color-info);
    animation: notification-container-open @animation-duration ease;
  }

  [part='container']::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3em;
    opacity: 0;
    transition: opacity 200ms ease;
    color: var(--background-color, @scheme-color-info);
    background: currentColor;
    box-shadow: 0 0 1em 1em currentColor;
  }

  [part='content'] {
    width: 100%;
    text-align: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [part='clear'] {
    .touch-action();
    margin: auto;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0.75em;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  &:hover [part='clear'],
  &:hover [part='container']::before {
    opacity: 1;
  }

  &[confirm] {
    --background-color: @scheme-color-confirm;
  }

  &[warning] {
    --background-color: @scheme-color-warning;
  }

  &[error] {
    --background-color: @scheme-color-error;
  }

  &[collapsed] {
    animation-fill-mode: forwards;
    animation-name: notification-close;

    [part='container'] {
      animation-name: notification-container-close;
    }

    [part='clear'],
    [part='container']::before {
      opacity: 0;
    }
  }

  @keyframes notification-open {
    from {
      height: 0;
    }
    to {
      height: @bar-height;
    }
  }

  @keyframes notification-close {
    from {
      height: @bar-height;
    }
    to {
      height: 0;
    }
  }

  @keyframes notification-container-open {
    0% {
      opacity: 0.1;
      transform: rotateX(-90deg);
    }
    80% {
      opacity: 1;
      transform: rotateX(0);
    }
    90% {
      opacity: 1;
      transform: rotateX(0);
    }
    100% {
      opacity: 1;
      transform: rotateX(0);
    }
  }

  @keyframes notification-container-close {
    from {
      opacity: 1;
      transform: rotateX(0);
    }
    to {
      transform: rotateX(90deg);
    }
  }
}