/*
 * Synology header search — 從 dsygno v3.60.0 (s-navbar-search) 抽出的樣式
 * 原始碼位置：resources/assets/js/vendor/dsygno/dsygno-v3.60.0.js（Vue SFC，shadow DOM 內）
 * 這裡改成一般 DOM 可用，class 名稱維持原樣方便日後比對上游。
 */

.s-nvbr-search {
  /* 收合寬度（= 一顆 icon button） */
  --s-nvbr-searchbar-w: 40px;
  --snvbr-search-psuedo-zidx: 0;
  --snvbr-search-toggle-zidx: 2;
  --snvbr-search-bar-zidx: 1;

  /*
   * 顏色直接吃 dsygno 全域 CSS（dsygno-v3.xx.css）在 :root 上的 token，
   * fallback 是原站的實際值 —— dsygno 沒載入時樣式一樣成立。
   * 淺色 header 就把這兩行改成 var(--s-gray-1) / var(--s-gray-10) 之類的組合。
   */
  --s-nvbr-search-open-bgc: var(--s-gray-10, #1c1c1c);
  --s-nvbr-search-color: var(--s-white, #fff);
  --s-nvbr-hover-transition: 0.15s ease-in-out;

  position: relative;
  height: 48px;
  width: 40px;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .s-nvbr-search {
    --s-nvbr-searchbar-w: 48px;
    height: 48px;
    width: 48px;
  }
}

/* 補滿 header 高度的 hover 熱區（原始碼此處 calc 拼成 clac，等於失效，這裡修正） */
.s-nvbr-search::before {
  content: '';
  position: absolute;
  z-index: var(--snvbr-search-psuedo-zidx);
  top: calc((var(--s-nvbr-height, 72px) - 100%) / -2);
  right: 0;
  width: var(--s-nvbr-searchbar-w);
  height: var(--s-nvbr-height, 72px);
}

.s-nvbr-search:hover .s-nvbr-search__bar:not(.s-nvbr-search__bar--open) {
  opacity: 0.8;
  transition: opacity var(--s-nvbr-hover-transition);
}

/* 疊在放大鏡上的透明點擊區；展開後才顯示 X */
.s-nvbr-search__toggle {
  position: absolute;
  z-index: var(--snvbr-search-toggle-zidx);
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s 0.05s ease-in-out;
}

.s-nvbr-search__toggle-icon {
  display: flex;
  align-items: center;
  opacity: 0;
  /* Instant on close to avoid overlapping the search icon while the bar
     snaps back to 48px width (width isn't in transition-property). */
  transition: opacity 0s;
}

.s-nvbr-search__toggle-icon--active {
  opacity: 1;
  /* Fade in on open only. */
  transition: opacity 0.15s 0.05s ease-in-out;
}

/* 搜尋列：收合時只露出最右 48px（放大鏡），展開時往左長出來 */
.s-nvbr-search__bar {
  position: absolute;
  z-index: var(--snvbr-search-bar-zidx);
  right: 0;
  top: 4px;
  height: 40px;
  width: var(--s-nvbr-searchbar-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transform: translate(calc(100% - 48px));
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
  transition-property: background-color;
}

@media screen and (min-width: 1024px) {
  .s-nvbr-search__bar {
    top: 0;
    height: 48px;
  }
}

.s-nvbr-search__bar--open {
  transform: translate(0);
  background-color: var(--s-nvbr-search-open-bgc);
}

@media screen and (min-width: 1024px) {
  .s-nvbr-search__bar--open { --s-nvbr-searchbar-w: 300px; }
}

@media screen and (min-width: 1680px) {
  .s-nvbr-search__bar--open { --s-nvbr-searchbar-w: 420px; }
}

.s-nvbr-search__bar-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0;
}

.s-nvbr-search__bar-enlarger {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* visually hidden label */
.s-nvbr-search__form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  line-height: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.s-nvbr-search__form-input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--s-nvbr-search-color);
  font: inherit;
  opacity: 0;
  transition: opacity 0.15s 0.05s ease-in-out;
}

.s-nvbr-search__form-input--active {
  opacity: 1;
}

/* icon 描邊跟著 --s-nvbr-search-color 走（原始 svg 寫死 white） */
.s-nvbr-search svg [stroke] { stroke: var(--s-nvbr-search-color); }
.s-nvbr-search svg [fill]:not([fill='none']) { fill: var(--s-nvbr-search-color); }

/*
 * dsygno 的 reset（含 focus 樣式）是寫在各元件 shadow DOM 的 @layer dsygno.reset 內，
 * 全域拿不到，所以這裡補一份一樣的，讓鍵盤操作外觀和原站一致。
 */
/*
.s-nvbr-search button:focus-visible:focus,
.s-nvbr-search input:focus-visible:focus {
  outline: solid 3px rgba(92, 176, 255, 0.7);
  outline-offset: -3px;
}
*/