@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.nft-gradient {
  background: linear-gradient(
    101.12deg,
    #7B3FE4 27.35%,
    #9D5DFF 99.99%,
    #c81cc5 100%,
    #c81cc5 100%
  );
}

.white-bg {
  background: rgba(255, 255, 255, 0.2);
}

.nav-h {
  height: calc(100vh - 66px);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.checkbox {
  opacity: 0;
  position: absolute;
}

.label {
  transform: scale(1.5);
}

.ball {
  top: 2px;
  left: 2px;
  transition: transform 0.2s linear;
}

/*  target the elemenent after the label*/
.checkbox:checked + .label .ball {
  transform: translateX(16px);
}

.fa-moon {
  color: pink;
  font-size: 9px;
}

.fa-sun {
  color: yellow;
  font-size: 9px;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flexStart {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.flexStartCenter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flexBetweenStart {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flexCenterStart {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@layer components {
    .action-icon {
        @apply flex items-center justify-center p-2;
    }

    .action-tooltip {
        @apply absolute w-auto p-2 m-2 min-w-max top-10 rounded-md shadow-md font-poppins dark:text-white text-nft-black-1 text-sm minlg:text-lg font-semibold dark:bg-nft-black-1 bg-white scale-0
    }
}
