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

/* Global */
.answerx-app-wrapper {
  scrollbar-width: none;
}

.answerx-app-wrapper a {
  text-decoration: none;
}

@layer base {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="checkbox"],
  input[type="radio"],
  select,
  select[multiple],
  textarea {
    @apply !min-h-[60px] border-gray-border rounded-lg px-4 py-3 text-base font-normal text-gray-dark placeholder:text-gray-medium focus:outline-none focus:ring-2 focus:ring-violet focus:border-transparent;
  }

  /* lastpass shenanigans */
  [data-lastpass-icon-root] {
    display: none;
  }
}

@layer components {
  /* Navigation links */
  .mx-nav-link {
    @apply text-white px-5 py-4.5 bg-transparent transition-all duration-300 text-base font-normal;
    border-radius: 5px;
  }

  .mx-nav-link.is-active,
  .mx-nav-link:hover {
    @apply bg-white bg-opacity-10 text-white;
  }

  /* Buttons */
  .mx-button {
    @apply bg-violet text-white px-8 py-4.5 text-[15px] font-medium transition-all duration-300 hover:bg-gray-dark flex items-center justify-center gap-4;
    border-radius: 5px;
  }

  .mx-button-secondary {
    @apply bg-white text-gray-dark px-8 py-4.5 text-[15px] font-medium transition-all duration-300 hover:bg-gray-light border border-gray-border;
    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.05));
    border-radius: 5px;
  }

  .mx-text-button {
    @apply text-violet text-[15px] font-medium;
  }
  .mx-text-button .count {
    @apply font-normal;
  }
  .mx-text-button.is-active {
    @apply text-gray-dark;
  }

  /* Badges */
  .badge {
    @apply text-green bg-light-green px-2.5 py-1.5 rounded-full inline-block font-bold leading-none text-xs uppercase max-w-fit;
  }
  .badge.badge--error {
    @apply text-red bg-light-red;
  }
  .badge.badge--info {
    @apply text-blue bg-light-blue;
  }
  .badge.badge--success {
    @apply text-green bg-light-green;
  }

  /* Tables */
  .max-line-item {
    @apply grid grid-cols-[150px_1fr] min-h-6 items-center text-base font-normal text-gray-medium;
  }
  .mx-table-label {
    @apply text-gray-medium text-base font-medium;
  }
}

/* license key button visibility */
#deactivate-api-key,
.has-license-key #activate-api-key {
  display: none;
}

.has-license-key #deactivate-api-key {
  display: block;
}

/* customize wp color picker */
.wp-picker-container .wp-color-result.button {
  min-height: 30px;
  margin: 0 6px 6px 0;
  padding: 0 0 0 42px;
  font-size: 13px;
  border-color: #7f56d9;
  min-width: 140px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.wp-color-result-text {
  background: #fff;
  border-radius: 0 2px 2px 0;
  border-left: 1px solid #7f56d9;
  color: #667085;
  display: block;
  line-height: 2.54545455;
  padding: 0 6px;
  text-align: center;
  font-size: 13px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.wp-picker-input-wrap .button.wp-picker-default {
  margin-left: 6px;
  padding: 0 8px;
  line-height: 2.54545455;
  min-height: 30px;
}
/* ------------------------------ */

.loader {
  width: 20px;
  height: 20px;
  border: 3px solid #cfcfcf;
  border-bottom-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  display: none;
}
.is-loading .loader {
  display: inline-block;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}