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

/* Hide dropdown options before Alpine loads */
[x-cloak] {
  display: none !important;
}

.vertical-rl { writing-mode: vertical-rl; }

@layer components {
  /* for debuging layouts */
  .debug-layout {
    @apply bg-amber-100;
  }
  .debug-layout > div:nth-child(even) {
    @apply bg-blue-200;
  }

  .debug-layout > div:nth-child(odd) {
    @apply bg-amber-200;
  }

  .debug-layout > div > div:nth-child(even) {
    @apply bg-blue-300;
  }

  .debug-layout > div > div:nth-child(odd) {
    @apply bg-amber-300;
  }

  .debug-layout > div > div > div:nth-child(even) {
    @apply bg-blue-400;
  }

  .debug-layout > div > div > div:nth-child(odd) {
    @apply bg-amber-400;
  }

  .debug-layout span {
    @apply bg-amber-500;
  }
}
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/**
  based on the prototype https://codepen.io/alfredox/pen/YPKPvMM
**/

#ring-wave {
  position: absolute;
  height: 100%;
  width: 100%;
  /* background-color: yellow; */
  opacity: 0.5;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  justify-content: center;
}

#ring-wave__center {
  width: 4rem;
  height: 4rem;
  position: relative;
}

#ring-wave__center .growing-ring {
  position: absolute;
  top: 0;
  left: 0;
  background-color: blue;
  border-radius: 50%; /* creates a circular background */
  height: 100%;
  aspect-ratio: 1 / 1;
  opacity: 0;
  animation: 1s linear 0s 1 normal grow-ring;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ring-wave__center .growing-ring div {
  background-color: white;
  border-radius: 50%; 
  /** height: 70%; determines the width of ring dynamically set: should remove the property **/
  aspect-ratio: 1 / 1;
  opacity: 1;
}

@keyframes grow-ring {
  from {
    /* pushes the sun down past the viewport */
    transform: scale(100%);
    opacity: 1;
  }

  to {
    /* returns the sun to its default position */
    transform: scale(1000%);
    opacity: 0;
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, 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.
 *


 */