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

@layer components {
  .arrow {
    @apply relative triangle  flex justify-center items-center  text-lg;
    box-shadow: inset 0px 6px 10px -10px rgba(255, 255, 255, 0.8),
      inset 0px -6px 10px -10px rgba(255, 255, 255, 0.8);
  }

  .triangle {
    @apply after:block after:absolute after:bottom-0 after:left-[100%]
    after:border-t-[1rem] after:border-b-[1rem] after:border-l-[2rem]
    after:border-t-transparent after:border-b-transparent after:z-50;
  }
  .triangle-dark {
    @apply after:border-l-info;
  }

  .triangle-light {
    @apply after:border-l-success;
  }
  .item button {
    @apply hover:bg-active !important;
  }
  /* table */
  .content-box-background {
    background: linear-gradient(
      180deg,
      rgba(127, 237, 193, 0.1),
      rgba(0, 0, 0, 0),
      rgba(127, 237, 193, 0.1)
    );
  }
}

@layer utilities {
  .btn{
    @apply px-4 py-1;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
  }

  .btn-success {
    @apply text-white border border-active bg-active hover:bg-[theme("colors.green.500")]
  }

  .btn-info {
    @apply text-white border border-info bg-info hover:bg-[theme("colors.sky.400")]
  }

  .btn-outline-success {
    @apply text-white border border-active hover:bg-active bg-transparent
  }

  .btn-outline-info {
    @apply text-white border border-info hover:bg-info bg-transparent
  }

  .custom-border {
    @apply border border-info rounded-md;
  }

  .btn-text-without-border {
    @apply active:border-0 focus:border-0 focus-visible:border-0 active:outline-none focus:outline-none focus-visible:outline-none;
  }
}