/** Type scale System */
/** 38px, 30px, 24px, 19px, 15px, 12.5px, 10px, 8px, 6px, 5px  */

/** Spacing System */
/** 160px, 96px, 80px, 64px, 48px, 40px, 32px, 24px, 16px, 12px, 8px, 4px, 2px */

/* Navbar Starts */
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.navbar__top {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--bg-primary);
  padding: var(--spacing-24px) var(--spacing-24px);
}

.navbar__items {
  display: flex;
  gap: var(--spacing-24px);
}

.navbar__logo {
  font-size: var(--fs-24px);
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}

.navbar__logo span {
  letter-spacing: -1px;
}

.navbar__logo a {
  text-decoration: none;
  display: flex;
  gap: var(--spacing-4px);
  align-items: center;
}

.navbar__logo img {
  height: var(--spacing-32px);
}

.navbar__logo a {
  text-decoration: none;
  color: inherit;
}

.navbar__datetime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-19px);
  color: var(--text-primary-shade);
}

.navbar__search-container {
  display: flex;
  align-items: center;
  background-color: var(--bg-secondary-shade);
  width: var(--spacing-120px);
  border-radius: var(--spacing-4px);
  cursor: text;
}

.navbar__search-icon {
  font-size: var(--fs-24px);
  padding: 0 var(--spacing-8px);

  color: #666;
}

.navbar__search__clear-icon {
  font-size: var(--fs-24px);
  margin-right: var(--spacing-8px);
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.hide-clear-icon {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.navbar__search-container [name="search-text"] {
  font-family: inherit;
  font-size: var(--fs-15px);
  outline: none;
  border: none;
  width: 70%;
  color: var(--text-dark);
  padding: var(--spacing-8px) 0;
  font-weight: 500;
  background-color: inherit;
  transition: none;
}

.navbar__search-container [name="search-text"]::placeholder {
  color: #666;
}

.navbar__links {
  display: flex;
  gap: var(--spacing-24px);
  align-items: center;
  position: relative;
}

.navbar__links > * {
  color: inherit;
  font-size: var(--fs-19px);
  font-weight: 500;
  color: var(--text-primary-shade);
  padding: var(--spacing-4px);
}

.navbar__bookmarks-link {
  text-decoration: none;
}

.navbar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
}

.navbar__hamburger__icon {
  color: var(--bg-secondary);
  font-size: var(--fs-38px);
}

/* Categories style starts */

.navbar__categories {
  width: 100%;
  padding: var(--spacing-12px) var(--spacing-24px);
  display: flex;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.navbar__categories.sticky {
  position: fixed;
  top: 0;
  z-index: 200;
  background-color: var(--bg-secondary-tint);
}

.navbar__links__category-list {
  display: flex;
  margin: 0 auto;
  flex-grow: 1;
}

.navbar__links__category-list::-webkit-scrollbar {
  height: 0;
}

.category-list__item__link {
  color: #444;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.7rem;
  display: inline-block;
  padding: var(--spacing-8px) var(--spacing-16px);
  border-radius: var(--spacing-4px);
}

.category-list__item {
  list-style-type: none;
  text-align: center;
  flex-grow: 1;
}

.category-list__item--active .category-list__item__link {
  color: var(--bg-primary);
}

.btn--navbar-link--categories {
  display: flex;
  align-items: center;
  gap: var(--spacing-4px);
  justify-content: space-between;
}

/* .btn--navbar-link--categories__icon {
  
} */

.navbar__links:not(:has(.category-list--hidden))
  .btn--navbar-link--categories__icon {
  transform: rotate(180deg);
}

/* Categories style ends */

/* Navbar ends */