@tailwind utilities;

@layer utilities {
  .block-hidden {
    @apply block invisible opacity-0;
  }

  .md-show-block {
    @apply hidden md:block;
  }

  .md-show-inblock {
    @apply hidden md:inline-block;
  }

  .w-h-full {
    @apply w-full h-full;
  }

  .sticky-top {
    @apply sticky top-0;
  }

  .glassy-background {
    @apply backdrop-filter backdrop-blur-sm;
  }

  .dark-glass-background-gradient {
    background: linear-gradient(226deg, rgba(93, 99, 111, 0.1) 1.26%, rgba(25, 30, 40, 0.2) 100%);
  }

  .light-glass-background-gradient {
    background: linear-gradient(226deg, rgba(250, 250, 250, 0.9) 1.26%, rgba(250, 249, 249, 0.9) 100%);
  }

  /* Flex shortcuts */
  .f-between-center {
    @apply flex justify-between items-center;
  }

  .f-center {
    @apply flex justify-center items-center;
  }

  .f-justify-center {
    @apply flex justify-center;
  }

  .f-items-center {
    @apply flex items-center;
  }

  .f-row {
    @apply flex flex-row;
  }

  .f-col {
    @apply flex flex-col;
  }

  .box-shadow-small {
    box-shadow: 0px 10px 48px 0px rgba(5, 9, 18, 0.3);
  }

  .box-shadow-large {
    box-shadow: 0px 20px 66px 0px rgba(5, 9, 18, 0.48);
  }
}
