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

@layer utilities {
  .h-vh {
    min-height: 100vh;
  }
}

@layer components {
  .btn {
    @apply bg-blue-400 font-semibold text-gray-900 text-base px-3 py-2;
    @apply hover:bg-blue-500 focus:outline-none focus:ring-2 ring-blue-300;
    @apply flex flex-row items-center justify-center;
    border-radius: 5px;
  }

  .btn-alt {
    @apply btn bg-gray-900 text-blue-400 hover:bg-black focus:ring-2 ring-blue-300;
  }

  .text-box {
    @apply bg-gray-800 border border-gray-950 px-3 rounded-md p-2 w-full text-gray-200;
    @apply focus:outline-none focus:border-blue-400;
  }

  .btn-small {
    @apply px-3 py-2 text-base;
  }

  .call-icon-wrapper {
    @apply bg-gray-800 border border-gray-950 rounded-full p-2 md:p-3 cursor-pointer;
  }

  .call-icon-wrapper.active {
    @apply bg-blue-500 border border-blue-800;
  }

  .call-icon-wrapper.disabled {
    @apply opacity-50;
  }

  .call-icon {
    @apply text-white h-5 w-5 md:h-6 md:w-6;
  }

  .call-icon-wrapper.phn {
    @apply bg-red-600 border-red-800;
  }

  .btn-icon {
    @apply text-gray-900 w-5 h-5 mr-2;
  }

  .popper {
    @apply bg-gray-700 px-4 py-5 bg-opacity-20 backdrop-filter backdrop-blur-sm;
    @apply border border-gray-950 rounded text-gray-200 mb-3 z-10 shadow;
  }
}

@layer utilities {
  .text-light {
    @apply text-gray-200;
  }

  .text-dark {
    @apply text-gray-900;
  }
}
