@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@100..900&display=swap");
body,
#wpbody,
#wpfooter {
  @apply bg-white dark:bg-wp-gray-80;
}

#wpbody-content {
  padding: 0 !important;
}

#wpcontent {
  padding: 0 !important;
}

#wpfooter {
  display: none !important;
}

#contextual-help-wrap {
  display: none !important;
}

.wp-has-current-submenu:after,
a.current:after {
  border: none !important;
}

#ra-settings-page {
  @apply flex flex-row;
  @apply font-roboto;
  @apply text-wp-gray-60 dark:text-wp-gray-30;
  height: calc(100vh - 32px);
}
#ra-settings-page h1,
#ra-settings-page h2,
#ra-settings-page h3,
#ra-settings-page h4,
#ra-settings-page h5,
#ra-settings-page h6 {
  @apply font-poppins;
  @apply text-wp-gray-70 dark:text-wp-gray-5;
  @apply font-medium;
  @apply text-xl;
  @apply m-0 p-0;
}
#ra-settings-page p {
  @apply font-roboto;
  @apply text-wp-gray-60 dark:text-wp-gray-20;
  @apply text-sm;
  @apply mb-4;
}

@media screen and (max-width: 782px) {
  #ra-settings-page {
    height: calc(100vh - 46px);
  }
}
.ra-aside-layout {
  @apply flex sm:w-[240px] sm:min-w-[200px] sm:max-w-[240px];
}

.ra-aside {
  @apply flex flex-col w-full justify-between p-4;
}

.ra-aside-footer {
  @apply hidden sm:flex;
  @apply flex-row items-center justify-between px-2;
  @apply text-wp-gray-20 dark:text-wp-gray-50;
}
.ra-aside-footer a {
  @apply text-wp-gray-20 dark:text-wp-gray-50;
  @apply hover:text-wp-blue-40 dark:hover:text-wp-blue-30 hover:underline;
  @apply focus:text-wp-blue-70 dark:focus:text-wp-blue-30 focus:rounded-sm;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-wp-blue-50;
  @apply transition-all duration-200 ease-in-out;
}

.ra-content-layout {
  @apply flex flex-col flex-grow p-6 overflow-auto;
  @apply border-l border-wp-gray-5 dark:border-wp-gray-60;
}

.ra-content-header {
  @apply flex flex-row items-center justify-between;
}

.ra-theme-toggle {
  @apply rounded-md p-1;
  @apply flex items-center justify-center size-6 min-w-6 min-h-6;
  @apply bg-transparent;
  @apply text-wp-gray-100 dark:text-wp-gray-5;
  @apply hover:text-wp-blue-70 dark:hover:text-white;
  @apply hover:bg-wp-blue-0 dark:hover:bg-wp-blue-70;
  @apply transition-all duration-200 ease-in-out;
  @apply cursor-pointer;
  @apply outline-transparent outline-2 outline-offset-0;
  @apply focus:shadow-none focus:border-transparent focus:outline-wp-blue-50 focus:outline-2 focus:outline-offset-2;
  @apply transition-all duration-200 ease-in-out;
}

.ra-content-description {
  @apply max-w-[600px];
}

.ra-content-settings {
  @apply flex flex-col gap-6 py-6;
}

.ra-logo {
  @apply flex flex-row gap-2 items-center p-2;
}
.ra-logo img {
  @apply inline-flex size-6 w-6 h-6 min-w-6 min-h-6;
}
.ra-logo span {
  @apply hidden sm:inline-flex;
  @apply font-poppins text-lg font-bold;
  @apply text-wp-blue-90 dark:text-wp-gray-0;
}

.ra-divider {
  @apply flex h-0 border-b border-b-wp-gray-5 dark:border-b-wp-gray-60;
}

.ra-aside-navigation {
  @apply flex flex-col gap-4;
}

.ra-nav-group {
  @apply flex flex-col;
  @apply gap-1;
}

.ra-nav-label {
  @apply text-sm px-2 pb-1 hidden sm:flex;
}

.ra-nav-button,
.ra-nav-link {
  @apply flex flex-row gap-2 items-center cursor-pointer;
  @apply text-sm font-normal;
  @apply p-2 rounded-md;
  @apply text-wp-blue-50 dark:text-wp-blue-20;
  @apply bg-transparent;
  @apply hover:text-wp-blue-70 dark:hover:text-wp-blue-10;
  @apply hover:bg-wp-blue-0 dark:hover:bg-wp-blue-70;
  @apply focus:text-wp-blue-70 dark:focus:text-wp-blue-10;
  @apply focus:bg-wp-blue-0 dark:focus:bg-wp-blue-70;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-wp-blue-50;
  @apply transition-all duration-200 ease-in-out;
}
.ra-nav-button.active,
.ra-nav-link.active {
  @apply text-wp-gray-5 dark:text-wp-gray-0;
  @apply bg-wp-gray-80 dark:bg-wp-gray-90;
}

.ra-nav-button-text,
.ra-nav-link-text {
  @apply hidden sm:inline-flex;
}

.ra-notification-queue {
  @apply fixed bottom-4 right-4 z-99;
  @apply flex flex-col gap-2 items-end;
}

.ra-notification {
  @apply flex items-center gap-2;
}
.ra-notification.float-notification {
  @apply max-w-[400px] w-fit;
  @apply transition-all duration-300 ease-in-out;
  @apply px-4 py-3;
  @apply rounded-md;
  @apply text-wp-gray-5 dark:text-wp-gray-0;
  @apply bg-wp-gray-80 dark:bg-wp-gray-90;
  @apply border-l-4;
}
.ra-notification.success {
  @apply border-l-wp-green-40;
}
.ra-notification.warning {
  @apply border-l-wo-red-40;
}
.ra-notification .ra-notification-text {
  @apply flex items-center text-[14px];
}

.ra-notification-close {
  @apply flex cursor-pointer items-center justify-center;
  @apply size-4;
}

.ra-label {
  @apply flex flex-row gap-1;
  @apply font-medium text-[15px];
  @apply text-wp-gray-70 dark:text-wp-gray-0;
}
.ra-label.processing .ra-label-text {
  @apply text-wp-gray-50 dark:text-wp-gray-40;
  @apply cursor-not-allowed;
  @apply pointer-events-none;
}

.ra-processing {
  @apply flex w-4.5 h-4.5 max-w-4.5 max-h-4.5 text-wp-gray-100 dark:text-wp-gray-0;
}

.ra-settings-control {
  @apply flex flex-col gap-3;
}

.ra-control {
  @apply flex flex-col;
}

.ra-control-wrapper {
  @apply flex flex-col lg:flex-row gap-2;
}

.ra-helper {
  @apply font-normal text-sm max-w-[600px];
  @apply text-wp-gray-40 dark:text-wp-gray-20;
}
.ra-helper.processing .ra-helper-text {
  @apply text-wp-gray-20 dark:text-wp-gray-40;
  @apply cursor-not-allowed;
  @apply pointer-events-none;
}
.ra-helper a,
.ra-helper .ra-button-reset {
  @apply text-wp-blue-50 dark:text-wp-blue-20;
  @apply outline-2 outline-transparent;
  @apply bg-transparent shadow-none;
  @apply hover:text-wp-blue-70 dark:hover:text-wp-blue-10 hover:underline;
  @apply focus:text-wp-blue-70 dark:focus:text-wp-blue-10 focus:outline-offset-2 focus:outline-wp-blue-50 focus:rounded-md;
  @apply cursor-pointer;
  @apply transition-all duration-200 ease-in-out;
}

.ra-settings-control textarea {
  @apply w-full min-w-0 sm:min-w-[400px] max-w-[400px];
  @apply rounded-md;
  @apply bg-transparent;
  @apply border border-wp-gray-10 dark:border-wp-gray-50;
  @apply text-wp-gray-70 dark:text-wp-gray-10;
  @apply placeholder:text-wp-gray-30;
  @apply hover:border-wp-blue-30;
  @apply outline-transparent outline-2 outline-offset-0;
  @apply focus:shadow-none focus:border-transparent focus:outline-wp-blue-50 focus:outline-2 focus:outline-offset-2;
  @apply transition-all duration-200 ease-in-out;
}
.ra-settings-control textarea:disabled {
  @apply cursor-not-allowed;
  @apply bg-transparent opacity-50 filter grayscale;
  @apply animate-pulse;
}

.ra-control-wrapper.type-select {
  @apply items-start lg:items-center;
}

.ra-settings-control select {
  @apply w-full min-w-0 sm:min-w-[400px] max-w-[400px];
  @apply rounded-md min-h-9;
  @apply bg-transparent;
  @apply border border-wp-gray-10 dark:border-wp-gray-50;
  @apply text-wp-gray-70 dark:text-wp-gray-10;
  @apply placeholder:text-wp-gray-30;
  @apply hover:border-wp-blue-30;
  @apply outline-transparent outline-2 outline-offset-0;
  @apply focus:shadow-none focus:border-transparent focus:outline-wp-blue-50 focus:outline-2 focus:outline-offset-2;
  @apply transition-all duration-200 ease-in-out;
}
.ra-settings-control select:disabled {
  @apply cursor-not-allowed;
  @apply bg-transparent opacity-50 filter grayscale;
  @apply animate-pulse;
}

.ra-control-wrapper.type-checkbox {
  @apply flex flex-row gap-2 items-center;
}

.ra-settings-control input[type=checkbox] {
  @apply flex items-center justify-center;
  @apply rounded-md;
  @apply min-h-6 min-w-6;
  @apply bg-transparent;
  @apply border border-wp-gray-10 dark:border-wp-gray-50;
  @apply text-wp-gray-70 dark:text-wp-gray-10;
  @apply placeholder:text-wp-gray-30;
  @apply hover:border-wp-blue-30;
  @apply outline-transparent outline-2 outline-offset-0;
  @apply focus:shadow-none focus:border-transparent focus:outline-wp-blue-50 focus:outline-2 focus:outline-offset-2;
  @apply transition-all duration-200 ease-in-out;
}
.ra-settings-control input[type=checkbox]:checked:before {
  @apply flex items-center justify-center;
  @apply w-4 h-4 min-h-4 min-w-4;
  @apply rounded-sm;
  background-color: var(--color-wp-blue-40);
  content: "";
  margin: 0;
}
.ra-settings-control input[type=checkbox]:disabled {
  @apply cursor-not-allowed;
  @apply bg-transparent opacity-50 filter grayscale;
  @apply animate-pulse;
}

@theme {
  /* Fonts */
  --font-roboto: "Roboto", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  /* wp-blue */
  --color-wp-blue-0: #f0f6fc;
  --color-wp-blue-5: #c5d9ed;
  --color-wp-blue-10: #9ec2e6;
  --color-wp-blue-20: #72aee6;
  --color-wp-blue-30: #4f94d4;
  --color-wp-blue-40: #3582c4;
  --color-wp-blue-50: #2271b1;
  --color-wp-blue-60: #135e96;
  --color-wp-blue-70: #0a4b78;
  --color-wp-blue-80: #043959;
  --color-wp-blue-90: #01263a;
  --color-wp-blue-100: #00131c;
  /* wp-gray */
  --color-wp-gray-0: #f6f7f7;
  --color-wp-gray-2: #f0f0f1;
  --color-wp-gray-5: #dcdcde;
  --color-wp-gray-10: #c3c4c7;
  --color-wp-gray-20: #a7aaad;
  --color-wp-gray-30: #8c8f94;
  --color-wp-gray-40: #787c82;
  --color-wp-gray-50: #646970;
  --color-wp-gray-60: #50575e;
  --color-wp-gray-70: #3c434a;
  --color-wp-gray-80: #2c3338;
  --color-wp-gray-90: #1d2327;
  --color-wp-gray-100: #101517;
  /* wo-red */
  --color-wo-red-0: #fcf0f1;
  --color-wo-red-5: #facfd2;
  --color-wo-red-10: #ffabaf;
  --color-wo-red-20: #ff8085;
  --color-wo-red-30: #f86368;
  --color-wo-red-40: #e65054;
  --color-wo-red-50: #d63638;
  --color-wo-red-60: #b32d2e;
  --color-wo-red-70: #8a2424;
  --color-wo-red-80: #691c1c;
  --color-wo-red-90: #451313;
  --color-wo-red-100: #240a0a;
  /* wp-yellow */
  --color-wp-yellow-0: #fcf9e8;
  --color-wp-yellow-5: #f5e6ab;
  --color-wp-yellow-10: #f2d675;
  --color-wp-yellow-20: #f0c33c;
  --color-wp-yellow-30: #dba617;
  --color-wp-yellow-40: #bd8600;
  --color-wp-yellow-50: #996800;
  --color-wp-yellow-60: #755100;
  --color-wp-yellow-70: #614200;
  --color-wp-yellow-80: #4a3200;
  --color-wp-yellow-90: #362400;
  --color-wp-yellow-100: #211600;
  /* wp-green */
  --color-wp-green-0: #edfaef;
  --color-wp-green-5: #b8e6bf;
  --color-wp-green-10: #68de7c;
  --color-wp-green-20: #1ed14b;
  --color-wp-green-30: #00ba37;
  --color-wp-green-40: #00a32a;
  --color-wp-green-50: #008a20;
  --color-wp-green-60: #007017;
  --color-wp-green-70: #005c12;
  --color-wp-green-80: #00450c;
  --color-wp-green-90: #003008;
  --color-wp-green-100: #001c05;
}
@custom-variant dark (&:where(.dark, .dark *));