/** Component: Navbar */

$selector-color-mode-toggle-button: 'button[class*="ColorModeToggle"]';
$selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';

:root body {
  --docsearch-searchbox-background: var(--strapi-neutral-150);
  --docsearch-searchbox-shadow: 0 0 0 2px var(--strapi-primary-600);
  --docsearch-muted-color: var(--strapi-neutral-400);
  --docsearch-text-color: var(--strapi-neutral-400);

  --ifm-navbar-height: 56px;
  --ifm-navbar-padding-vertical: var(--strapi-spacing-1);
  --ifm-navbar-padding-horizontal: var(--strapi-spacing-2);
  --ifm-navbar-shadow: 0 1px 0 0 var(--strapi-neutral-150);
}

.navbar {
  --custom-navbar-brand-mr: 0;
  --custom-navbar-icon-color: var(--strapi-neutral-500);
  --custom-navbar-icon-button-size: 36px;
  --custom-navbar-icon-button-hover-background: var(--strapi-neutral-100);
  --custom-navbar-items-font-size: var(--strapi-font-size-sm);
  --custom-navbar-items-gap: var(--strapi-spacing-3);
  --custom-navbar-logo-img-width: 40px;
  --custom-navbar-toggle-mr: var(--strapi-spacing-1);
  --custom-navbar-transition: all 0.2s ease;

  --ifm-navbar-padding-horizontal: var(--custom-navbar-items-gap);

  transition: var(--custom-navbar-transition);

  &__items {
    max-width: var(--custom-navbar-items-width);
    gap: var(--strapi-spacing-2);
  }

  &__brand,
  &__logo {
    height: auto;
    display: flex;
  }

  &__brand {
    margin-right: var(--custom-navbar-brand-mr);
    font-size: large;

    @include small-up {
      font-size: x-large;
    }
  }

  &__toggle {
    margin-right: var(--custom-navbar-toggle-mr);
  }

  &__logo {
    margin-right: var(--custom-navbar-items-gap);

    img {
      height: var(--custom-navbar-logo-img-height);
      width: var(--custom-navbar-logo-img-width);
    }
  }

  &__link {
    --ifm-font-weight-semibold: 500;
    --ifm-navbar-link-hover-color: var(--strapi-neutral-800);

    font-size: var(--custom-navbar-items-font-size);

    &--active {
      --ifm-font-weight-semibold: 700;
    }
  }

  &__link svg,
  .navbar-sidebar__close,
  .DocSearch-Button,
  #{$selector-color-mode-toggle-button} {
    color: var(--custom-navbar-icon-color);
  }

  .navbar-sidebar__close,
  .DocSearch-Button,
  #{$selector-color-mode-toggle-button} {
    --ifm-color-emphasis-600: currentColor;

    background: transparent;
    border-radius: 50%;

    &:hover {
      background: var(--custom-navbar-icon-button-hover-background);
    }
  }

  .navbar__toggle,
  .navbar-sidebar__close,
  #{$selector-color-mode-toggle-wrapper} {
    align-items: center;
    justify-content: center;
    height: var(--custom-navbar-icon-button-size);
    width: var(--custom-navbar-icon-button-size);
  }

  .DocSearch-Button {
    width: var(--custom-navbar-search-button-width);
  }
}

/** Responsive */
@include small-up {
  .navbar {
    .DocSearch-Button {
      --custom-navbar-icon-button-hover-background: var(--strapi-neutral-0);

      color: var(--strapi-neutral-400);
      border: var(--strapi-input-border);
      border-radius: 6px;
      font-family: var(--ifm-font-family-base);
      height: 40px;
      padding: 0 var(--strapi-spacing-3);
      background-color: var(--custom-navbar-icon-button-hover-background);

      svg path {
        stroke-width: 2px;
      }

      &-Container {
        gap:  var(--strapi-spacing-1);
      }

      &-Placeholder,
      &-Key {
        font-size: var(--custom-navbar-items-font-size);
      }

      &-Key {
        margin: 0;
        padding: 0;
        width: 14px;
        height: 14px;
        background: none;
        border: none;
        box-shadow: none;
        font-weight: 600;
        line-height: 0;
        align-items: center;
        justify-content: center;

        &:first-of-type {
          font-size: 150%;
        }
      }

      &-Keys {
        padding: 2px 0 0;
        justify-content: end;
      }
    }
  }
}

/** Responsive */
@include medium-up {
  .navbar {
    --custom-navbar-brand-mr: 60px;
    --custom-navbar-items-gap: var(--strapi-spacing-4);
    --custom-navbar-search-button-width: 266px;

    --ifm-navbar-padding-horizontal: var(--custom-navbar-items-gap);
  }
}