@use "sass:meta";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=fallback');

@tailwind base; // If not commented breaks the classic theme

@layer base {
  *,
  ::before,
  ::after {
    border-width: 0;
    border-style: solid;
    // border-color: theme('borderColor.DEFAULT', currentColor);
  }

  button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
  }
}

@import 'additional/reset-docusaurus-default-style.scss';

@tailwind components;

@import 'additional/utility-patterns.scss';
@import 'additional/theme.scss';

@tailwind utilities;

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.alert a,
.admonition,
.admonition-icon svg {
  color: var(--ifm-font-color-base);
  fill: var(--ifm-font-color-base);
  stroke: var(--ifm-font-color-base);
}

.center {
  text-align: center;
}

img {
  color: red; /* color of alt text for images with invalid src url */
}


/* FAQList styles */
.toc-inline {
  ul.table-of-contents, li {
    list-style: none;
  }
}

.faq-anchor {
  position: relative;
  top: -70px;
}

/* import css-vars directly from mosaic theme */
@import '~@stoplight/mosaic/themes/default.css';
.json-schema-viewer {
  /* load via meta-load in wrapper class, to prevent css leaking to rest of the site */
  @include meta.load-css('../../node_modules/@stoplight/mosaic/styles.css');
}

/* custom navbar back-to-root link */
.navbar__items {
  position: relative;
}

@media screen and (min-width: 1000px) {
  .navbar__brand {
    margin-left: 32px;
  }

  .hidden-back-btn .navbar__brand {
    margin-left: 0;
  }
}

.navbar__toggle.clean-btn {
  margin-left: 32px;
}

.fitko-navbar-icon--back {
  display: inline-block !important;
  padding: 0;
  position: absolute;
  left: 2px;
  top: 13px;
}

.fitko-navbar-icon--back a {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
}

.fitko-navbar-icon--back img {
  display: inline-block;
  height: 18px;
}

.fitko-navbar-icon--back.hidden {
  display: none !important;
}


@media (min-width: 997px) {
  .navbar__items--right [class^="searchBox"] {
    position: right;
    right: 100%;
  }
}


@media (max-width:444px)  {
  .navbar__logo {
    display: inline !important;
    text-align: left;
    height: 28px;
    margin-left: -60px;
    margin-right: 0px;
  }
}