.search[data-v-1527c363] {
  --size: 44px;
  display: flex;
  align-items: center;
  height: var(--size);
  width: var(--size);
  padding-left: 4px;
  overflow: hidden;
  border: var(--np-border-thin);
  color: var(--ion-color-primary);
  border-radius: 50px;
  transition: width 0.2s cubic-bezier(0.18, 0.74, 0.32, 1.14);
}
.search-input[data-v-1527c363] {
  flex: 1;
  border: none;
  padding: 0.5rem;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  color: var(--ion-text-color);
  cursor: pointer;
}
.search-input[data-v-1527c363]:focus {
  outline: none;
}
.search-submit[data-v-1527c363] {
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--np-navigation-icon);
  cursor: pointer;
  min-width: calc(var(--size) - 10px);
  min-height: calc(var(--size) - 10px);
}
.search-submit[data-v-1527c363]:hover {
  background: rgba(var(--ion-color-medium-rgb), 0.1);
}
.search-clear[data-v-1527c363] {
  transition: opacity 0.25s ease;
  border-radius: 50px;
  font-size: 20px;
  padding: 8px 4px;
  opacity: 0;
}
.search-clear-show[data-v-1527c363] {
  opacity: 1;
}
.search-clear[data-v-1527c363]:hover {
  background: rgba(var(--ion-color-medium-rgb), 0.1);
}
.search-open[data-v-1527c363] {
  width: 300px;
}
.search-open .search-input[data-v-1527c363] {
  cursor: initial;
  opacity: 1;
}
.search-open .search-submit[data-v-1527c363] {
  background: rgba(var(--ion-color-medium-rgb), 0.1);
}