.NewChatButton {
  position: absolute;
  z-index: var(--z-chat-float-button);
  right: 1rem;
  bottom: 1rem;
  transform: translateY(5rem);

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  &[dir="rtl"] {
    right: auto;
    left: 1rem;
  }

  body.no-page-transitions & {
    transform: none !important;
    opacity: 0;
    transition: opacity 0.15s;

    &.revealed {
      opacity: 1;
    }
  }

  &.revealed {
    transform: translateY(0);
  }

  > .Button {
    .icon-new-chat-filled,
    .icon-close {
      position: absolute;
    }

    &:not(.active) {
      .icon-new-chat-filled {
        animation: grow-icon 0.4s ease-out;
      }

      .icon-close {
        animation: hide-icon 0.4s forwards ease-out;
      }
    }

    &.active {
      .icon-close {
        animation: grow-icon 0.4s ease-out;
      }

      .icon-new-chat-filled {
        animation: hide-icon 0.4s forwards ease-out;
      }
    }
  }
}