@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&family=Geist:wght@100..900&display=swap');

@theme {
  --font-family-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-family-lexend: 'Lexend Exa', system-ui, -apple-system, sans-serif;
  --color-main: #1D2327;
}

/* ==========================================================================
   Form Controls Reset - Override WordPress Admin Styles
   ========================================================================== */

#gateway-exta-app input[type="text"],
#gateway-exta-app input[type="password"],
#gateway-exta-app input[type="email"],
#gateway-exta-app input[type="url"],
#gateway-exta-app input[type="tel"],
#gateway-exta-app input[type="number"],
#gateway-exta-app input[type="search"],
#gateway-exta-app input[type="date"],
#gateway-exta-app input[type="datetime-local"],
#gateway-exta-app input[type="time"],
#gateway-exta-app input[type="month"],
#gateway-exta-app input[type="week"],
#gateway-exta-app textarea,
#gateway-exta-app select,
#gateway-exta-app input:not([type]),
#gateway-exta-app .form-input,
#gateway-exta-app .form-select,
#gateway-exta-app .form-textarea {
  background-color: #191919 !important;
  color: #BFBFBF !important;
  border-color: #404040 !important;
  box-shadow: none !important;
  outline: none !important;
}

#gateway-exta-app input[type="text"]:focus,
#gateway-exta-app input[type="password"]:focus,
#gateway-exta-app input[type="email"]:focus,
#gateway-exta-app input[type="url"]:focus,
#gateway-exta-app input[type="tel"]:focus,
#gateway-exta-app input[type="number"]:focus,
#gateway-exta-app input[type="search"]:focus,
#gateway-exta-app input[type="date"]:focus,
#gateway-exta-app input[type="datetime-local"]:focus,
#gateway-exta-app input[type="time"]:focus,
#gateway-exta-app input[type="month"]:focus,
#gateway-exta-app input[type="week"]:focus,
#gateway-exta-app textarea:focus,
#gateway-exta-app select:focus,
#gateway-exta-app input:not([type]):focus,
#gateway-exta-app .form-input:focus,
#gateway-exta-app .form-select:focus,
#gateway-exta-app .form-textarea:focus {
  background-color: #191919 !important;
  color: #BFBFBF !important;
  border-color: #525252 !important;
  box-shadow: none !important;
  outline: none !important;
}

#gateway-exta-app input::placeholder,
#gateway-exta-app textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

#gateway-exta-app select option {
  background-color: #191919 !important;
  color: #BFBFBF !important;
}

#gateway-exta-app input[type="checkbox"],
#gateway-exta-app input[type="radio"] {
  background-color: #191919 !important;
  border-color: #404040 !important;
}

#gateway-exta-app input[type="checkbox"]:checked,
#gateway-exta-app input[type="radio"]:checked {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

#gateway-exta-app button,
#gateway-exta-app .button {
  box-shadow: none !important;
}

/* ==========================================================================
   End Form Controls Reset
   ========================================================================== */

.font-lexend {
  font-family: var(--font-family-lexend);
}

.app-bg {
  background-color: var(--color-main);
}

.app-main-margin-fix {
  margin-left: -20px;
}

/* Global anchor tag styles to override WordPress admin */
#gateway-exta-app a {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#gateway-exta-app a:focus,
#gateway-exta-app a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* High specificity to override WordPress admin styles */
.app-bg aside .extension-heading {
  @apply !text-slate-500;
}

.app-bg aside nav a.extension-link {
  color: rgb(100 116 139) !important; /* slate-500 */
}

.app-bg aside nav a.extension-link:hover {
  color: rgb(226 232 240) !important; /* slate-200 */
  background-color: rgb(38 38 38) !important; /* neutral-800 */
}

.app-bg aside nav a.extension-link.active {
  color: rgb(226 232 240) !important; /* slate-200 */
  background-color: rgb(64 64 64) !important; /* neutral-700 */
}
