.search-wrapper {
  background-color: $gallery-100;
  padding-top: $base-spacing-1-half;
  padding-bottom: $base-spacing-1-half;

  .search {
    position: relative;

    form {
      display: flex;
      align-items: center;
      background-color: $base-white;
    }

    input {
      padding: $base-spacing;
      width: 100%;
      height: 50px;
      border: 1px solid $boulder-400;
      outline: none;

      &:focus {
        color: $base-black;
        border-color: $sky-blue-500;
      }
    }

    .search-button {
      position: absolute;
      right: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: $base-spacing-half;
      border-radius: 2px;

      &:hover {
        background-color: $base-black-10p;
      }

      &:active {
        background-color: $base-black-20p;
      }
    }
  }

  .search ~ .message-helper {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 400;
    line-height: 1;
    display: none;
    color: $tundra-500;
  }

  .search.has-error ~ .message-helper {
    display: flex;
    align-items: center;
    color: $base-state-error;

    &::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="%23C92428"><path fill-rule="evenodd" d="M11.5432415,2.27638693 C11.713492,1.93620712 12.1751125,1.91005274 12.390172,2.19790782 L12.4384888,2.27641345 L21.946526,21.2773669 C22.1002734,21.584617 21.9052552,21.9418394 21.5813837,21.994373 L21.4978587,22.0009535 L2.50005913,21.9616197 C2.1570639,21.9609096 1.9251758,21.6278685 2.0222352,21.3154724 L2.05347919,21.2380077 L11.5432415,2.27638693 Z M11.9898576,3.61780154 L3.30997394,20.9628015 L20.6887586,20.9988015 L11.9898576,3.61780154 Z M11.9908585,15.9938015 C12.5436454,15.9938015 12.9917676,16.4415168 12.9917676,16.9938015 C12.9917676,17.5460863 12.5436454,17.9938015 11.9908585,17.9938015 C11.4380717,17.9938015 10.9899494,17.5460863 10.9899494,16.9938015 C10.9899494,16.4415168 11.4380717,15.9938015 11.9908585,15.9938015 Z M11.9908585,10.0272592 C12.2365416,10.0272592 12.4408757,10.2041344 12.4832501,10.4373836 L12.4913131,10.5272592 L12.4913131,14.5067898 C12.4913131,14.7829322 12.267252,15.0067898 11.9908585,15.0067898 C11.7451755,15.0067898 11.5408414,14.8299146 11.498467,14.5966654 L11.490404,14.5067898 L11.490404,10.5272592 C11.490404,10.2511168 11.7144651,10.0272592 11.9908585,10.0272592 Z"/></svg>');
      margin-right: $base-spacing-half;
    }
  }
}