@import '../../../../../common/foundation/resources/client/ui/library/progress/animation.css';
@import '../../../../../common/foundation/resources/client/ui/library/skeleton/skeleton.css';
@import '../../../../../common/foundation/resources/client/core/scrollbar.css';
@import '../../../../../common/foundation/resources/client/uploads/file-type-colors.css';

@layer base {
  body {
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    @apply antialiased;
  }

  html, body, #root {
    width: 100%;
    height: 100%;
  }

  html {
    font-family: var(--be-font-family, theme('fontFamily.sans'));
  }

  .widget-header-fade-gradient {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  }

  .svg-image-container svg {
    width: inherit;
    height: inherit;
    max-width: 100%;
  }

  .chat-popup-shadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0.48px 2.41px -0.38px, rgba(0, 0, 0, 0.17) 0px 4px 20px -0.75px;
  }

  .chat-toggle-shadow {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px;

    &:hover {
      box-shadow: 0 2px 0px rgba(0,0,0,.09),0 4px 10px rgba(0,0,0,.24);
    }
  }

  .chat-toggle-icon {
    animation: iconAnimation 0.25s ease;
  }

  @keyframes iconAnimation {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;
