@tailwind base;

@layer base {
  .hint-bubble {
    @apply relative;

    &::before {
      content: "";
      @apply absolute -z-10 bottom-[-5px] left-[1px] h-[46%] w-[20px] border-purple-200 dark:border-haiti-700 border-l-[20px] rounded-br-[16px_14px] translate-y-[-26px];
    }
  }
  .flash-card-item-container {
    @apply bg-zinc-50 dark:bg-haiti-700 text-black dark:text-white
  }

  .eye-background-color:has(input:checked) {
    @apply bg-azure-500
  }

  .svg-dimensions {
    @apply w-6 h-6;
  }
}

.top-bar {
  padding: 23px 20px;
}

.flash-card-item-container, .cards-section, .hint-button, .nav-section {
  &:before {
    background: linear-gradient(244.42deg, rgba(0, 0, 0, 0) 59.7%, var(--epink) 110.41%);
  }

  .number-circle {
    width: 18px;
    height: 18px;
  }
}

.card-front::before, .card-back::before {
  border-radius: 16px;
  background: linear-gradient(123.91deg, var(--epink) 35.6%, rgba(166, 7, 222, 0) 54.02%);
}

.hint-button, .hint-button::before {
  border-radius: 100px;
}

.slides {
  transition: transform 0.6s ease;
}

.card {
  perspective: 100%;
}

.card-front,
.card-back {
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card-back {
  transform: rotateY(180deg);
}

.card.flip .card-front {
  transform: rotateY(180deg);
}

.card.flip .card-back {
  transform: rotateY(0deg);
}

@media screen and (min-width: 768px) {
  .main-wrapper {
    font-size: 13px;
    line-height: 20px;
  }

  .flash-card-item-container::before, .cards-section::before {
    background: none;
  }
}