kt-blog-web/src/styles/toolbar.scss

@use './tokens' as blog;

@include blog.block {
  &__header {
    position: relative;
    z-index: 100;
    height: 0;
    color: var(--argon-text);
  }

  &__header-global {
    width: 100%;
  }

  &__header-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex: 1;
    align-items: center;
    gap: 18px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
  }

  @media (min-width: 1200px) and (max-width: 1700px) {
    &__header-container {
      max-width: 1200px;
    }
  }

  @media (min-width: 1700px) {
    &__header-container {
      max-width: 1500px;
    }
  }

  &__header-brand {
    min-width: 180px;
  }

  &__header-title {
    color: var(--argon-text);
    font-weight: 700;
  }

  &__header-nav--hover {
    display: flex;
    flex: 1;
    align-items: center;
  }

  &__header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__header-nav-link {
    color: rgba(238, 238, 238, 0.78);
    font-size: 14px;

    &:hover,
    &[aria-current='page'] {
      color: var(--argon-title);
    }
  }

  &__header-search {
    width: 40px;
    margin: 0;
    cursor: pointer;
    transition:
      width 0.42s cubic-bezier(0.4, 0, 0, 1),
      transform 0.42s cubic-bezier(0.4, 0, 0, 1);

    .kt-blog__input-group {
      width: 100%;
      height: 46px;
      justify-content: flex-end;
      border: 0;
      border-radius: var(--card-radius);
      box-shadow: none;
      transition:
        border-color 0.32s ease,
        background-color 0.32s ease,
        box-shadow 0.32s ease;
    }

    .kt-blog__input-addon,
    .kt-blog__input {
      transition:
        all 0.5s cubic-bezier(0.4, 0, 0, 1);
    }

    .kt-blog__input-addon-wrap {
      display: flex;
      width: 40px;
      height: 46px;
      margin-right: 0;
      flex: 0 0 40px;
    }

    .kt-blog__input-addon {
      width: 40px;
      height: 46px;
      align-items: center;
      padding: 10px 12px;
      font-size: 16px !important;
      line-height: 24px;
      border-radius: var(--card-radius) 0 0 var(--card-radius);
    }

    .kt-blog__input {
      width: 200px;
      height: 46px;
      padding: 10px 12px 10px 0;
      flex: 0 0 auto;
      border: 0;
      border-radius: 0 var(--card-radius) var(--card-radius) 0;
      font-size: 14px;
      line-height: 21px;
      box-shadow: none;
    }
  }

  &__header-search--open {
    width: 240px;

    .kt-blog__input-group {
      background: var(--argon-control-soft);
      box-shadow: none;
    }
  }

  &__header-search:not(.kt-blog__header-search--open) {
    .kt-blog__input-group {
      background: transparent;
    }

    .kt-blog__input-addon {
      color: #fff;
      background: transparent;
    }

    .kt-blog__input {
      width: 0 !important;
      min-width: 0 !important;
      flex-basis: 0;
      padding: 0 !important;
      border-color: transparent !important;
      background: transparent;
    }
  }

  &__header-search--open {
    .kt-blog__input-addon {
      color: var(--argon-text);
      background: var(--argon-control-soft);
    }
  }

  &__header-toggle,
  &__header-mobile-search {
    display: none;
  }

  &__header-navbar {
    --toolbar-color: var(--themecolor-rgbstr);

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0.5rem 1rem;
    background-color: rgba(var(--toolbar-color), 0.85) !important;
    box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
    transition:
      background-color 0.3s ease,
      backdrop-filter 0.3s ease,
      padding 0.15s ease,
      box-shadow 0.3s ease;
  }

  &--dark &__header-navbar {
    --toolbar-color: var(--color-darkmode-toolbar);
  }

  &--no-banner &__header-navbar {
    background-color: rgba(var(--themecolor-rgbstr), 0.85) !important;
  }

  &--no-banner.kt-blog--toolbar-blur &__header-navbar {
    background-color: rgba(var(--themecolor-rgbstr), 0.65) !important;
    backdrop-filter: blur(16px);
  }

  &--no-banner.kt-blog--toolbar-blur &__header-navbar--no-blur {
    background-color: rgba(var(--themecolor-rgbstr), 0.85) !important;
    backdrop-filter: blur(0);
  }

  &__header-navbar--ontop {
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    background-color: rgba(var(--toolbar-color), 0) !important;
    box-shadow: none;
    backdrop-filter: blur(0);
  }

  &__header-navbar--ontop,
  &:not(.kt-blog--no-banner) &__header-navbar {
    .kt-blog__header-title,
    .kt-blog__header-nav-link,
    .kt-blog__header-search:not(.kt-blog__header-search--open) .kt-blog__input-addon,
    .kt-blog__header-search.kt-blog__header-search--open .kt-blog__input-addon {
      color: rgba(255, 255, 255, 0.92);
      text-shadow: 0 1px 2px rgba(30, 23, 42, 0.28);
    }
  }
}