/* ================================
   SINGLE SEARCH COMPONENT
================================ */

.SingleSearch {
  --search-height: 40px;
  --search-radius: 22px;
  --primary: #3b82f6;
  --border: #e5e7eb;
  --text: #1f2937;
  --placeholder: #9ca3af;
  position: absolute;
  top: 12px;
  z-index: 10;
}

/* Wrapper */
.SingleSearch .SearchBox {
  height: var(--search-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

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

.SingleSearch .Text {
  width: 0;
  height: var(--search-height);

  padding: 0;
  opacity: 0;
  visibility: hidden;

  background: #fff;
  color: var(--text);

  border: 1px solid transparent;
  border-right: 0;
  border-radius: var(--search-radius) 0 0 var(--search-radius);

  outline: none;

  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-size: 14px;

  transition:
    width 0.35s ease,
    opacity 0.25s ease,
    padding 0.35s ease,
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.SingleSearch .Text::placeholder {
  color: var(--placeholder);
}

/* ================================
   SEARCH BUTTON
================================ */

.SingleSearch .Button {
  width: var(--search-height);
  height: var(--search-height);

  border-radius: 50%;
  border: 1px solid var(--border);

  cursor: pointer;

  background: #fff
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' \
fill='none' stroke='%236b7280' \
stroke-width='2' \
stroke-linecap='round' \
stroke-linejoin='round' \
viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='8'/>\
<line x1='21' y1='21' x2='16.65' y2='16.65'/>\
</svg>")
    center / 20px no-repeat;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);

  transition:
    width 0.35s ease,
    border-radius 0.35s ease,
    background-color 0.25s ease,
    box-shadow 0.35s ease;
}

/* ================================
   OPEN STATE
================================ */

.SingleSearch .SearchBox:hover .Text,
.SingleSearch .SearchBox:focus-within .Text {
  width: 240px;

  padding: 0 16px;

  opacity: 1;
  visibility: visible;

  border-color: var(--border);

  box-shadow: -4px 6px 12px rgba(0, 0, 0, 0.06);
}

.SingleSearch .SearchBox:hover .Button,
.SingleSearch .SearchBox:focus-within .Button {
  width: 48px;

  border-radius: 0 var(--search-radius) var(--search-radius) 0;

  border-left-color: transparent;

  background-color: #f9fafb;

  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.06);
}

/* ================================
   FOCUS STATE
================================ */

.SingleSearch .SearchBox:focus-within .Text {
  border-color: var(--primary);

  box-shadow: -4px 6px 12px rgba(59, 130, 246, 0.15);
}

.SingleSearch .SearchBox:focus-within .Button {
  border-color: var(--primary);
  border-left-color: transparent;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' \
fill='none' stroke='%233b82f6' \
stroke-width='2' \
stroke-linecap='round' \
stroke-linejoin='round' \
viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='8'/>\
<line x1='21' y1='21' x2='16.65' y2='16.65'/>\
</svg>");
}

/* ================================
   HOVER EFFECT
================================ */

.SingleSearch .Button:hover {
  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}