/**
 * Navigation primitives
 * Menus, breadcrumbs, dropdowns, headers
 */
@layer ks-primitives {
  /* ==========================================================================
     Main Menu - Horizontal Navigation
     ========================================================================== */

  .ks-nav-main {
    display: flex;
    align-items: center;
    gap: var(--ks-space-10);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ks-nav-item {
    margin: 0;
  }

  .ks-nav-link {
    color: var(--ks-color-text-default);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    transition: color 200ms;
  }

  .ks-nav-link:hover,
  .ks-nav-link:focus {
    color: var(--ks-color-primary-600);
  }

  /* ==========================================================================
     Featured Menu
     ========================================================================== */

  .ks-nav-featured {
    display: flex;
    align-items: center;
    gap: var(--ks-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ks-nav-featured-item {
    margin: 0;
  }

  .ks-nav-featured-link {
    color: var(--ks-color-text-default);
    text-decoration: none;
    font-weight: 500;
  }

  /* ==========================================================================
     LMS Nav List - Vertical
     ========================================================================== */

  .ks-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-2);
  }

  .ks-nav-list-item {
    display: flex;
    padding: var(--ks-space-2) var(--ks-space-3);
    border-radius: var(--ks-radius-md);
    color: var(--ks-color-text-default);
    text-decoration: none;
  }

  .ks-nav-list-item:hover {
    background: var(--ks-color-surface-card);
  }

  /* ==========================================================================
     Breadcrumb - Simple List Variant
     ========================================================================== */

  .ks-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
  }

  .ks-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--ks-space-2);
    color: var(--ks-color-gray-400);
  }

  .ks-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-1);
    color: inherit;
    text-decoration: none;
    transition: color 0.15s var(--ks-ease-standard);
  }

  .ks-breadcrumb a:hover {
    color: var(--ks-color-primary-600);
  }

  .ks-breadcrumb li:last-child {
    color: var(--ks-color-text-default);
    font-weight: var(--ks-font-weight-medium);
  }

  /* Inverse breadcrumb - for dark hero sections */
  .ks-breadcrumb--inverse a {
    color: var(--ks-color-overlay-inverse-medium);
  }

  .ks-breadcrumb--inverse a:hover {
    color: var(--ks-color-text-inverse);
  }

  .ks-breadcrumb--inverse li:not(:last-child)::after {
    color: var(--ks-color-overlay-inverse-light);
  }

  .ks-breadcrumb--inverse li:last-child {
    color: var(--ks-color-text-inverse);
  }

  /* ==========================================================================
     Breadcrumb - BEM Variant
     ========================================================================== */

  .ks-breadcrumb__nav {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
  }

  .ks-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ks-breadcrumb__item {
    display: flex;
    align-items: center;
  }

  .ks-breadcrumb__link {
    display: flex;
    align-items: center;
    gap: var(--ks-space-1);
    color: var(--ks-color-gray-600);
    text-decoration: none;
    transition: color 200ms var(--ks-ease-standard);
  }

  .ks-breadcrumb__link:hover {
    color: var(--ks-color-primary-600);
  }

  :where(.dark) .ks-breadcrumb__link {
    color: var(--ks-color-gray-400);
  }

  :where(.dark) .ks-breadcrumb__link:hover {
    color: var(--ks-color-primary-400);
  }

  .ks-breadcrumb__current {
    display: flex;
    align-items: center;
    gap: var(--ks-space-1);
    font-weight: 500;
    color: var(--ks-color-gray-900);
  }

  :where(.dark) .ks-breadcrumb__current {
    color: white;
  }

  .ks-breadcrumb__separator {
    display: flex;
    align-items: center;
    color: var(--ks-color-gray-400);
    margin: 0 var(--ks-space-2);
  }

  :where(.dark) .ks-breadcrumb__separator {
    color: var(--ks-color-gray-500);
  }

  /* ==========================================================================
     Dropdown - BEM Variant
     ========================================================================== */

  .ks-dropdown {
    position: relative;
  }

  .ks-dropdown__menu {
    position: absolute;
    left: 0;
    margin-top: var(--ks-space-2);
    min-width: 12rem;
    background: var(--ks-color-surface-card);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    border: 1px solid var(--ks-color-gray-100);
    padding: var(--ks-space-2);
    z-index: 50;
  }

  .ks-dropdown__menu--right {
    left: auto;
    right: 0;
  }

  :where(.dark) .ks-dropdown__menu {
    background: var(--ks-color-gray-800);
    border-color: var(--ks-color-gray-700);
  }

  .ks-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
    width: 100%;
    padding: var(--ks-space-2) var(--ks-space-3);
    font-size: 0.875rem;
    color: var(--ks-color-text-muted);
    background: none;
    border: none;
    border-radius: var(--ks-radius-md);
    cursor: pointer;
    transition: background 150ms var(--ks-ease-standard), color 150ms var(--ks-ease-standard);
    text-decoration: none;
  }

  :where(.dark) .ks-dropdown__item {
    color: var(--ks-color-gray-300);
  }

  .ks-dropdown__item:hover {
    background: var(--ks-color-surface-muted);
  }

  :where(.dark) .ks-dropdown__item:hover {
    background: var(--ks-color-gray-700);
  }

  /* ==========================================================================
     Dropdown - Generic Variant
     ========================================================================== */

  .ks-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    padding: var(--ks-space-2) var(--ks-space-4);
    background: var(--ks-color-surface-card);
    border: 1px solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
    font-size: var(--ks-font-size-sm);
    font-weight: var(--ks-font-weight-strong);
    color: var(--ks-color-text-muted);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--ks-shadow-sm);
    transition: background 200ms var(--ks-ease-standard);
  }

  .ks-dropdown-trigger:hover {
    background: var(--ks-color-surface-hover);
  }

  .ks-dropdown-menu {
    position: absolute;
    right: 0;
    margin-top: var(--ks-space-2);
    background: var(--ks-color-surface-card);
    border: 1px solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-xl);
    z-index: 50;
    overflow: hidden;
  }

  .ks-dropdown-menu--hidden {
    display: none;
  }

  /* Dropdown menu width presets */
  .ks-dropdown-menu--sm {
    inline-size: 12rem;
  }

  .ks-dropdown-menu--md {
    inline-size: 14rem;
  }

  .ks-dropdown-option {
    display: block;
    width: 100%;
    padding: var(--ks-space-2) var(--ks-space-4);
    text-align: left;
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 200ms var(--ks-ease-standard);
  }

  .ks-dropdown-option:hover {
    background: var(--ks-color-surface-hover);
  }

  .ks-dropdown-option--active {
    background: var(--ks-color-primary-50);
    color: var(--ks-color-primary-700);
    font-weight: var(--ks-font-weight-strong);
  }

  :where(.dark) .ks-dropdown-option--active {
    background: color-mix(in srgb, var(--ks-color-primary-900) 20%, transparent);
    color: var(--ks-color-primary-300);
  }

  /* ==========================================================================
     Header - Sticky
     ========================================================================== */

  /* Admin-UI top offset. Core displace.js measures fixed admin UI (toolbar bar,
     open horizontal tray) and publishes the real pixel value on <html> as
     --drupal-displace-offset-top; anonymous pages have no toolbar so this falls
     back to 0. Shared by the sticky header and the sticky user sidebar
     (user-sidebar.css) so their offsets always match real toolbar geometry. */
  :root {
    --ks-admin-offset: var(--drupal-displace-offset-top, 0px);
  }

  .ks-header-sticky {
    position: sticky;
    left: 0;
    right: 0;
    top: var(--ks-admin-offset, 0px);
    z-index: 50;
  }

  /* ==========================================================================
     Header - Minimal (Learn Section)
     ========================================================================== */

  .ks-header-minimal {
    position: sticky;
    top: var(--ks-admin-offset, 0px);
    z-index: 50;
    background: var(--ks-color-white);
    border-bottom: 1px solid var(--ks-color-gray-200);
    backdrop-filter: blur(12px);
    transition: all 300ms var(--ks-ease-standard);
  }

  :where(.dark) .ks-header-minimal {
    background: var(--ks-color-black);
    border-color: var(--ks-color-gray-700);
  }

  .ks-header-minimal__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ks-space-1) var(--ks-space-4);
  }

  @media (min-width: 1024px) {
    .ks-header-minimal__inner {
      padding: var(--ks-space-1) var(--ks-space-6);
    }
  }

  .ks-header-minimal__logo img {
    width: 6rem;
  }

  @media (min-width: 768px) {
    .ks-header-minimal__logo img {
      width: 9rem;
    }
  }

  /* ==========================================================================
     Header Buttons & Controls
     ========================================================================== */

  .ks-header-btn {
    position: relative;
    min-height: 3rem;
    min-width: 3rem;
    padding: var(--ks-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ks-radius-sm);
    background: var(--ks-color-gray-200);
    color: var(--ks-color-gray-700);
    transition: all 200ms var(--ks-ease-standard);
    cursor: pointer;
  }

  .ks-header-btn:hover {
    background: var(--ks-color-gray-300);
  }

  .ks-header-btn:focus {
    outline: none;
  }

  :where(.dark) .ks-header-btn {
    background: var(--ks-color-gray-800);
    color: var(--ks-color-gray-300);
  }

  :where(.dark) .ks-header-btn:hover {
    background: var(--ks-color-gray-700);
  }

  .ks-header-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--ks-space-2);
    width: 12rem;
    max-width: calc(100vw - 1rem);
    background: var(--ks-color-surface-card);
    border: 1px solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-xl);
    overflow: hidden;
    z-index: 60;
  }

  .ks-header-dropdown[hidden] {
    display: none;
  }

  /* Notification indicator dot */
  .ks-notification-dot {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--ks-color-danger-500);
    border-radius: var(--ks-radius-full);
  }

  /* App header: white surface with bottom border (design bg-white border-b) */
  .ks-header--app {
    background-color: var(--ks-color-surface-page);
    border-block-end: 1px solid var(--ks-color-border-subtle);
  }

  :where(.dark) .ks-header--app {
    background-color: var(--ks-color-surface-black);
    border-color: var(--ks-color-gray-800);
  }

  /* App header (authenticated chrome): single compact row */
  .ks-header--app .ks-split {
    block-size: var(--ks-header-h, 4rem);
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ks-space-3);
  }

  /* App-header buttons: transparent circular hover targets */
  .ks-header--app .ks-header-btn {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: var(--ks-space-2);
    border-radius: var(--ks-radius-full);
    background: transparent;
    color: var(--ks-color-text-default);
  }

  .ks-header--app .ks-header-btn:hover {
    background: var(--ks-color-gray-100);
  }

  /* Tinted header button: gray at rest (design overflow trigger) */
  .ks-header--app .ks-header-btn--tinted {
    background: var(--ks-color-gray-100);
  }

  .ks-header--app .ks-header-btn--tinted:hover {
    background: var(--ks-color-gray-200);
  }

  /* App header logo: design Logo size=md (3rem tall, width auto) */
  .ks-header--app .ks-logo {
    inline-size: auto;
    block-size: 3rem;
  }

  /* Dark mode: show the white logo variant, hide the color one. */
  .dark .logo-light {
    display: none;
  }

  .dark .logo-dark {
    display: block;
  }

  /* Header hamburger only exists below the desktop breakpoint */
  @media (min-width: 1024px) {
    .ks-header--app [data-sidebar-open] {
      display: none;
    }
  }

  /* Buttons shown from the sm breakpoint upward */
  @media (max-width: 639.98px) {
    .ks-header--app .ks-header-btn--sm-up {
      display: none;
    }
  }

  /* Desktop main nav in the header right cluster (1024px+) */
  .ks-header-nav {
    display: none;
  }

  @media (min-width: 1024px) {
    .ks-header-nav {
      display: flex;
      align-items: center;
      margin-inline-end: var(--ks-space-2);
    }
  }

  /* App-header nav link sizing: design text-base / space-x-6 */
  .ks-header--app .ks-nav-main {
    gap: var(--ks-space-6);
  }

  .ks-header--app .ks-nav-link {
    font-size: var(--ks-font-size-base);
  }

  /* Sign Up / Log In buttons (640px+) */
  .ks-header-auth {
    display: none;
  }

  @media (min-width: 640px) {
    .ks-header-auth {
      display: flex;
      align-items: center;
      gap: var(--ks-space-2);
    }
  }

  /* Mobile-only header button (e.g. the mobile panel toggle) */
  @media (min-width: 640px) {
    .ks-header--app .ks-header-btn--mobile-only {
      display: none;
    }
  }

  /* Mobile expanded panel below the header row (<640px) */
  .ks-header-mobile-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
    border-block-start: 1px solid var(--ks-color-border-subtle);
    padding-block: var(--ks-space-4);
  }

  .ks-header-mobile-panel[hidden] {
    display: none;
  }

  @media (min-width: 640px) {
    .ks-header-mobile-panel {
      display: none;
    }
  }

  .ks-header-mobile-panel .ks-nav-main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ks-space-4);
  }

  /* Row inside a header dropdown or the mobile panel */
  .ks-header-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
    inline-size: 100%;
    padding: var(--ks-space-3) var(--ks-space-4);
    color: var(--ks-color-text-default);
    text-decoration: none;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .ks-header-menu-item:hover {
    background: var(--ks-color-surface-hover);
  }

  /* Centered pill search trigger in the app header */
  .ks-header-search-pill {
    flex: 1 1 auto;
    max-inline-size: 36rem;
    block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-2);
    padding-inline: var(--ks-space-4);
    border-radius: var(--ks-radius-full);
    background: var(--ks-color-gray-100);
    color: var(--ks-color-text-muted);
    transition: background 200ms var(--ks-ease-standard);
  }

  .ks-header-search-pill:hover {
    background: var(--ks-color-gray-200);
  }

  @media (max-width: 767.98px) {
    .ks-header-search-pill {
      display: none;
    }
  }

  /* Positioned wrapper for header dropdown menus */
  .ks-header-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  /* Circular avatar slot inside a header button */
  .ks-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
  }

  .ks-header-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ks-header-avatar img[hidden] {
    display: none;
  }

  /* Numeric count badge on header buttons */
  .ks-header-badge {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: var(--ks-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ks-font-size-xs);
    font-weight: 600;
    line-height: 1;
    color: var(--ks-color-white);
    background-color: var(--ks-color-danger-500);
    border-radius: var(--ks-radius-full);
  }

  .ks-header-badge[hidden] {
    display: none;
  }

  /* ==========================================================================
     Mobile Navigation
     ========================================================================== */

  .ks-mobile-nav-link {
    display: block;
    padding: var(--ks-space-3) var(--ks-space-4);
    color: var(--ks-color-text-default);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--ks-radius-md);
    transition: background 200ms var(--ks-ease-standard), color 200ms var(--ks-ease-standard);
  }

  .ks-mobile-nav-link:hover {
    background: var(--ks-color-surface-section);
    color: var(--ks-color-primary-600);
  }

  /* Menu */
  .ks-menu { display: flex; flex-direction: column; gap: var(--ks-space-1); list-style: none; padding: 0; margin: 0; }
  .ks-menu-item { padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-md); color: var(--ks-color-text-default); cursor: pointer; }
  .ks-menu-item:hover { background-color: var(--ks-color-surface-section); }

  /* Logo */
  .ks-logo {
    display: block;
    width: 9rem;
    height: auto;
  }
  @media (min-width: 768px) {
    .ks-logo {
      width: 18rem;
    }
  }

  /* Footer */
  .ks-footer-bottom { border-top: 1px solid var(--ks-color-border-subtle); padding-block: var(--ks-space-4); margin-block-start: var(--ks-space-8); }
  .ks-footer-dark { background-color: var(--ks-color-surface-strong); color: var(--ks-color-text-inverse); }

  /* Overlay utilities */
  .ks-overlay-faint { position: absolute; inset: 0; background-color: var(--ks-color-overlay-faint); }
  .ks-overlay-dim { position: absolute; inset: 0; background-color: var(--ks-color-overlay-subtle); }
  .ks-overlay-dark { position: absolute; inset: 0; background-color: var(--ks-color-overlay-dark); }
  .ks-overlay-gradient-bottom { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }
  .ks-overlay-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .ks-overlay-caption-bottom { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--ks-space-4); background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--ks-color-text-inverse); }
  .ks-overlay-badge-top-start { position: absolute; inset-block-start: var(--ks-space-2); inset-inline-start: var(--ks-space-2); }
  .ks-overlay-badge-top-end { position: absolute; inset-block-start: var(--ks-space-2); inset-inline-end: var(--ks-space-2); }
  .ks-overlay-badge-bottom-end { position: absolute; inset-block-end: var(--ks-space-2); inset-inline-end: var(--ks-space-2); }

  /* Modal */
  .ks-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--ks-color-overlay-strong);
    backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-4);
  }
  :where(.dark) .ks-modal-backdrop {
    background: rgb(0 0 0 / 95%);
  }

  .ks-modal-container {
    position: relative;
    background-color: var(--ks-color-surface-page);
    border-radius: var(--ks-radius-lg);
    max-width: 40rem;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
  }

  .ks-modal-content {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: var(--ks-space-6);
    background: var(--ks-color-surface);
    border-radius: var(--ks-radius-2xl);
    box-shadow: var(--ks-shadow-2xl);
    overflow: hidden;
  }
  :where(.dark) .ks-modal-content {
    background: var(--ks-color-gray-900);
  }

  .ks-modal-content--sm {
    padding: var(--ks-space-4);
    max-width: 28rem;
  }
  .ks-modal-content--md { max-width: 48rem; }
  .ks-modal-content--lg { max-width: 64rem; }

  .ks-modal-close {
    position: absolute;
    inset-block-start: var(--ks-space-3);
    inset-inline-end: var(--ks-space-3);
    padding: var(--ks-space-2);
    border-radius: var(--ks-radius-md);
    background: transparent;
    color: var(--ks-color-text-muted);
    cursor: pointer;
  }
  .ks-modal-close:hover {
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-text-strong);
  }
  :where(.dark) .ks-modal-close {
    background: var(--ks-color-gray-700);
  }
  :where(.dark) .ks-modal-close:hover {
    background: var(--ks-color-gray-600);
  }

  .ks-modal-scroll { max-height: 70vh; overflow-y: auto; }
  .ks-modal-grid { display: grid; gap: var(--ks-space-4); }

  .ks-modal-success { text-align: center; padding: var(--ks-space-8); }
  .ks-modal-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--ks-radius-full);
    background-color: var(--ks-color-success-100);
    color: var(--ks-color-success-600);
    margin-block-end: var(--ks-space-4);
  }
  :where(.dark) .ks-modal-success__icon {
    background: color-mix(in srgb, var(--ks-color-success-900) 30%, transparent);
  }

  .ks-modal-featured { display: grid; }
  @media (min-width: 768px) {
    .ks-modal-featured { grid-template-columns: 1fr 1fr; }
  }
  .ks-modal-featured--compact { max-width: 28rem; }
  .ks-modal-featured__content { padding: var(--ks-space-6); }
  .ks-modal-featured__gradient {
    background: linear-gradient(135deg, var(--ks-color-primary-600), var(--ks-color-primary-800));
    padding: var(--ks-space-6);
    color: var(--ks-color-text-inverse);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ks-modal-featured__gradient--secondary {
    background: linear-gradient(135deg, var(--ks-color-secondary-600), var(--ks-color-secondary-800));
  }

  /* ==========================================================================
     Mobile Search Bar - Touch-friendly search trigger
     ========================================================================== */

  .ks-mobile-search-bar {
    padding: 0.5rem 1rem 0.75rem;
    background: var(--ks-color-surface-section);
  }

  .ks-mobile-search-bar__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1.5px solid var(--ks-color-primary-600);
    border-radius: 0.5rem;
    color: var(--ks-color-gray-500);
    text-decoration: none;
  }

  .ks-mobile-search-bar__trigger svg {
    flex-shrink: 0;
    color: var(--ks-color-gray-500);
  }

  .ks-mobile-search-bar__placeholder {
    flex: 1;
    font-size: 0.9375rem;
  }

  .ks-mobile-search-bar__cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: ks-cursor-blink 1s step-end infinite;
  }

  @keyframes ks-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* ==========================================================================
     Search Bar - Full search bar with icon and action
     ========================================================================== */

  .ks-search-bar {
    width: 100%;
  }

  .ks-search-bar__wrapper {
    position: relative;
  }

  .ks-search-bar__icon {
    position: absolute;
    left: var(--ks-space-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }

  .ks-search-bar__input {
    padding-right: 6rem;
    box-shadow: var(--ks-shadow-xl);
  }

  .ks-search-bar__input--with-icon {
    padding-left: 3rem;
  }

  .ks-search-bar__action {
    position: absolute;
    right: var(--ks-space-2);
    top: 50%;
    transform: translateY(-50%);
  }

  /* ==========================================================================
     Step Connector - Progress indicator connector lines
     ========================================================================== */

  .ks-step-connector {
    position: absolute;
    left: 50%;
    top: 2.5rem;
    width: 2px;
    height: calc(100% - 2.5rem);
    background-color: var(--ks-color-border-subtle);
    transform: translateX(-50%);
  }

  .ks-step-connector--complete {
    background-color: var(--ks-color-secondary-500);
  }
}