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

@layer components {
    .pagy {
        @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
    }

    .pagy a[aria-label="Next"] {
        @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
    }

    .pagy a[aria-label="Previous"] {
        @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
    }

    .pagy a[aria-label="Next"][aria-disabled="true"] {
        @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
    }

    .pagy a[aria-label="Previous"][aria-disabled="true"] {
        @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
    }

    .pagy a, .pagy .gap {
        @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
    }

    .pagy a.current {
        @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
    }

    [data-flash-target="message"] {
      transition: opacity 0.5s ease-out, height 0.5s ease-out;
    }

    [data-flash-target="message"].hiding {
      opacity: 0;
      height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css.erb, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.landing-header {
    /* UI Properties */
    background: transparent url(/assets/back-blue-techy-3b72621aff84a62e35179354afc0cc013625975201363c246df5142bb0932dc2.jpg) 0% 0% no-repeat padding-box;
    background-position: center;
    background-size: cover;
    opacity: 1;
}

.curved-bg {
    background-color: #E2FAFB;
    border-top-left-radius: 80% 15%;
    border-top-right-radius: 80% 15%;
}

.typing {
  font-size: 20px;
}

.typing:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 2000ms infinite;
  animation: ellipsis steps(4,end) 2000ms infinite;
  content: "\2022\2022\2022"; /* unicode for bullet */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 2.5em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 2.5em;
  }
}

.popin {
  opacity: 0;
  animation-duration: 0.1s;
  -webkit-animation-duration: 0.1s;
  animation-name: pop;
  -webkit-animation-name: pop;
  animation-fill-mode: forwards;
  -webkitanimation-fill-mode: forwards;
}

@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes pop {
  to {
    opacity: 100%;
  }
}

.pop0 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.pop1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.pop2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.pop3 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.pop4 {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

.pop5 {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.demo {
  background-size: 1295px 780px;
  background-image: url(/Dots@2x.png);
  background-position: -375px -97px;
}

.footer-top {
  background-image: url(/footer-top.svg);}

[x-cloak] {
  display: none !important;
}

.icon-hover-effect {
  transition: transform 0.3s ease;
}

.icon-hover-effect:hover {
  transform: scale(1.1);
}

.conversation-details.hidden {
  display: none;
}

.toggle-details svg {
  transition: transform 0.2s ease-in-out;
}

.toggle-details svg.rotate-90 {
  transform: rotate(90deg);
}

.toggle-test-switch {
  transition: transform 0.2s ease-in-out;
}