*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --clr-primary: #ee6352;
  --clr-body: #333;
  --clr-bg: #ddd;
}



.content {
  //width: 20vw;
  position: relative;
}

.search {
  --size: 30px;
  
  display: flex;
  overflow: hidden;
  font-size: 1.25em;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-left: auto;
  transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.0);
  padding: 3px;
}

.search__input {
  border: 0;
  padding: .25em 1em;
  flex-grow: 1;
  outline: 0;
  z-index: 2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent;
  cursor: text;
}

.search__submit {
  font-size: 1.2rem;
  margin-left: auto;
  background: 0;
  border: 0;
  cursor: pointer;
  transition: background 200ms ease-out;
  width: calc(var(--size) - 5px);
  height: calc(var(--size) - 5px);
  color: #00426a;
  z-index: 3;
}

.search:focus-within {
  border-bottom: 1px solid #00426a;
  background-color: white;
  width: 30vw;
  cursor: initial; 
}

// Scss Document