/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/**
  Smooth scroll
 */
:root {
  scroll-behavior: smooth;
}

/**
  Css selection colors
 */
::-moz-selection {
  color: var(--kb-base-color);
  background-color: var(--kb-primary-color);
}
::-moz-selection,
::selection {
  color: var(--kb-base-color);
  background-color: var(--kb-primary-color);
}

[data-kenta-theme=light] {
  --kenta-primary-color: var(--kenta-light-primary-color);
  --kenta-primary-active: var(--kenta-light-primary-active);
  --kenta-accent-color: var(--kenta-light-accent-color);
  --kenta-accent-active: var(--kenta-light-accent-active);
  --kenta-base-color: var(--kenta-light-base-color);
  --kenta-base-100: var(--kenta-light-base-100);
  --kenta-base-200: var(--kenta-light-base-200);
  --kenta-base-300: var(--kenta-light-base-300);
}
[data-kenta-theme=light] .kenta-theme-switch .dark-mode {
  display: inline;
}
[data-kenta-theme=light] .kenta-theme-switch .light-mode {
  display: none;
}

[data-kenta-theme=dark] {
  --kenta-primary-color: var(--kenta-dark-primary-color, var(--kenta-light-primary-color));
  --kenta-primary-active: var(--kenta-dark-primary-active, var(--kenta-light-primary-active));
  --kenta-accent-color: var(--kenta-dark-accent-color, var(--kenta-light-accent-color));
  --kenta-accent-active: var(--kenta-dark-accent-active, var(--kenta-light-accent-active));
  --kenta-base-color: var(--kenta-dark-base-color, var(--kenta-light-base-color));
  --kenta-base-100: var(--kenta-dark-base-100, var(--kenta-light-base-100));
  --kenta-base-200: var(--kenta-dark-base-200, var(--kenta-light-base-200));
  --kenta-base-300: var(--kenta-dark-base-300, var(--kenta-light-base-300));
}
[data-kenta-theme=dark] .kenta-theme-switch .light-mode {
  display: inline;
}
[data-kenta-theme=dark] .kenta-theme-switch .dark-mode {
  display: none;
}

.has-negative-margin {
  z-index: 9;
}

#accordion-section-kenta_header,
#accordion-section-kenta_archive,
#accordion-section-custom_css,
#accordion-section-title_tagline,
#kenta_update_dynamic_css_cache {
  margin-top: 12px;
}
#accordion-section-kenta_header .accordion-section-title,
#accordion-section-kenta_archive .accordion-section-title,
#accordion-section-custom_css .accordion-section-title,
#accordion-section-title_tagline .accordion-section-title,
#kenta_update_dynamic_css_cache .accordion-section-title {
  border-top: 1px solid #dcdcde;
}

#accordion-section-kenta_single_post .accordion-section-title,
#accordion-section-kenta_pages .accordion-section-title,
#accordion-panel-woocommerce .accordion-section-title {
  display: flex;
  align-items: center;
  padding-left: 12px;
}
#accordion-section-kenta_single_post .accordion-section-title::before,
#accordion-section-kenta_pages .accordion-section-title::before,
#accordion-panel-woocommerce .accordion-section-title::before {
  content: "\f474";
  font-family: dashicons;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-size: 12px;
  margin: 0 8px;
  color: #a7aaad;
  transform: scaleX(-1);
}

#kenta_install_companion .button .loader {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid currentColor;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  -webkit-animation: rotation 1s linear infinite;
          animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
