.SearchBox {
  position: relative;
  display: flex;
  align-items: center;
}

.SearchBox .SearchBox-input {
    position: absolute;
    z-index: 10;
    right: 0;
    width: 0;
    height: auto;
    padding: 0;
    outline: none;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease-in-out;
  }

.SearchBox .SearchBox-icon {
    z-index: 20;
    pointer-events: none;
    cursor: pointer;
    fill: var(--clr-secondaryGreen);
    transition: transform 200ms ease;
  }

.SearchBox:hover .SearchBox-input, .SearchBox[focus-within] .SearchBox-input {
    width: 100vw;
    padding: var(--spaces);
    transform: scaleX(100%);
  }

.SearchBox:hover .SearchBox-input, .SearchBox:focus-within .SearchBox-input {
    width: 100vw;
    padding: var(--spaces);
    transform: scaleX(100%);
  }

@media screen and (min-width: 1024px) {

.SearchBox:hover .SearchBox-input, .SearchBox[focus-within] .SearchBox-input {
      right: 1rem;
      width: 20rem;
  }

.SearchBox:hover .SearchBox-input, .SearchBox:focus-within .SearchBox-input {
      right: 1rem;
      width: 20rem;
  }
    }

.SearchBox:hover .SearchBox-icon, .SearchBox[focus-within] .SearchBox-icon {
    fill: var(--clr-primary);
  }

.SearchBox:hover .SearchBox-icon, .SearchBox:focus-within .SearchBox-icon {
    fill: var(--clr-primary);
  }

@media screen and (min-width: 1024px) {

.SearchBox:hover .SearchBox-icon, .SearchBox[focus-within] .SearchBox-icon {
      transform: translateX(-1rem);
  }

.SearchBox:hover .SearchBox-icon, .SearchBox:focus-within .SearchBox-icon {
      transform: translateX(-1rem);
  }
    }