@tailwind base;

@layer base {
  .answer.wrong {
    @apply bg-red-400 dark:bg-red-400  text-white
  }

  .answer.checked {
    @apply bg-teal-400 dark:bg-teal-400 text-white
  }

  .answer.wrong input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L11 11M1 11L11 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: 50%;
    background-position: center;
    @apply bg-red-300
  }

  .answer input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12L10.2426 16.2426L18.727 7.75732' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: 70%;
    background-position: center;
    @apply bg-teal-300
  }
}


.checkbox-gradient-border {
  background: var(--checkbox-gradient);
  border: 1px solid transparent;
}

.box-gradient-border {
  background: var(--box-gradient);
  border: 1px solid transparent;
}

.input-gradient-border {
  background: var(--input-gradient);
  border: 1px solid transparent;
}

.text-gradient-border {
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: var(--text-gradient-border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.answer.checked {
  background-color: var(--checked-answer);
}


.multiple-choice-checkbox input[type="checkbox"] {
  opacity: 0;
}

.cards-navigation .label {
  width: 16px;
  height: 8px;
  background-color: #3E1269;
  cursor: pointer;
  transition: all .3s ease;
}

.cards-navigation .label:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

.cards-navigation .label.active:hover {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cards-navigation .label.active {
  width: 32px;
  height: 16px;
  background-color: var(--scroll-bar-color);
}

.points {
  /* background: radial-gradient(closest-side, rgba(255,255,255,0) 0, rgba(255,255,255,0) 1%, #0b0814 100%), linear-gradient(235deg, rgba(235,145,242,1) 0, rgba(11,186,174,1) 100%); */
}

.points .blue-circle-gradient {
  left: -60px;
  top: -12px;
  width: 120px;
  height: 110px;
  background: radial-gradient(circle, rgba(54, 178, 197, 0.2) 0%, rgba(54, 178, 197, 0.1) 30%, rgba(54, 178, 197, 0.05) 45%, rgba(54, 178, 197, 0) 70%);
}

.points .red-circle-gradient {
  left: 10px;
  width: 80px;
  height: 80px;
  top: 10px;
  background: radial-gradient(circle, rgba(193, 30, 89, 0.2) 0%, rgba(193, 30, 89, 0.1) 30%, rgba(193, 30, 89, 0.05) 50%, rgba(193, 30, 89, 0) 70%);
  ;
}

.points .pink-circle-gradient {
  top: -100px;
  left: -100px;
  width: 250px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 85, 235, 0.2) 0%, rgba(249, 85, 235, 0.1) 30%, rgba(249, 85, 235, 0.05) 40%, rgba(249, 85, 235, 0) 60%);
}

.points .big-circle-gradient {
  width: 250px;
  height: 250px;
  background: rgba(155, 54, 255, 0.6);
  background: radial-gradient(circle, rgba(155, 54, 255, 0.6) 0%, rgba(155, 54, 255, 0.3) 10%, rgba(155, 54, 255, 0.15) 20%, rgba(155, 54, 255, 0.05) 30%, rgba(155, 54, 255, 0) 45%);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.input-group-arrow-chevron {
  position: relative;

  input[list] {
    &::-webkit-calendar-picker-indicator, &::-webkit-list-button {
      opacity: 0;
      cursor: pointer;
    }
  }

  &::after {
    content: var(--select-bottom-arrow);
    position: absolute;
    display: block;
    z-index: 2;
    pointer-events: none;
    top: 55%;
    right: 1.5rem;
  }
}