.top-panel__search {
  padding: 0;
  display: flex;
}

.top-panel__search-button {
  background: var(--primary-color-dark);
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  margin: 0;
}

.top-panel__search-input {
  background: var(--primary-color-dark);
  width: 0;
  padding: 0;
  margin: 0;
  border: none;
  color: hsl(0, 0%, 100%);
  transition: width 0.15s ease-out;
  outline: none;
  font-size: calc(16rem/var(--initial-font-multiplier));
  border-radius: 0;
}

.top-panel__search-input::placeholder {
  color: hsla(0, 0%, 100%, 0.25);
}

.top-panel__search.js-search--expanded .top-panel__search-input {
  width: 150px;
  padding-left: calc(var(--grid-gap) / 2);
}

:root.root--special .top-panel__search-button,
:root.root--special .top-panel__search-input {
  background-color: var(--special-background-color);
  color: var(--special-text-color);
}

:root.root--special .top-panel__search.js-search--expanded .top-panel__search-input {
  border: 1px solid var(--special-text-color);
}

@media (hover: hover) {
  .top-panel__search-button:hover {
    background: var(--primary-color-hover);
  }
}