/* =========================================
   MOBILE SEARCH — BRISTLE SYSTEM
========================================= */

.mobile-search {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);

  visibility: hidden;
  pointer-events: none;
}

.mobile-search.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-search .mobile-panel-close {
  color: var(--color-text-inverse);
}

/* ================= BACKDROP ================= */

.mobile-search::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;

  height: var(--panel-height-search);

  background: var(--glass-dark);
  backdrop-filter: var(--backdrop-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-blur-lg);

  opacity: 0;

  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.mobile-search.is-open::before {
  opacity: 1;
}

/* ================= PANEL ================= */

.mobile-search__panel {
  position: absolute;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: auto;

  padding:
    var(--mobile-search-padding-y)
    var(--panel-padding-x-mobile)
    var(--mobile-search-padding-bottom);

  background: transparent;
  color: var(--color-text-inverse);

  visibility: hidden;
  pointer-events: none;
  opacity: 0;

  transform: translateY(calc(var(--space-2) * -1));

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth),
    visibility 0s linear var(--duration-slow);
}

.mobile-search.is-open .mobile-search__panel {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;

  transform: translateY(0);

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth),
    visibility 0s linear 0s;
}

/* ================= HEAD ================= */

.mobile-search__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-height: var(--mobile-search-head-height);
  margin-bottom: var(--space-3);
}

/* ================= BODY ================= */

.mobile-search__body {
  padding: var(--space-0);
}

/* ================= FIELD ================= */

.mobile-search__field {
  border-bottom: var(--border-1) solid var(--color-border-inverse);
  padding-bottom: var(--space-3);
}

/* ================= INPUT ================= */

.mobile-search__input {
  width: 100%;

  color: var(--color-text-inverse);
  background: transparent;
  border: var(--border-0);
  outline: none;
  padding: var(--space-0);

  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.mobile-search__input::placeholder {
  color: var(--color-border-inverse);
  opacity: 1;

  font-size: var(--text-fluid-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (min-width: 769px) {
  .mobile-search {
    display: none !important;
  }
}