webapp/src/components/_shared/SearchField/SearchField.module.scss

.searchField {
  display: flex;
  justify-content: flex-end;
  position: relative;

  &.bordered {
    border: 2px solid var(--black-100);
    padding: 10px 0 12px 10px;

    input {
      width: 100%;
      display: block;
      box-sizing: border-box;
      margin-right: 40px;

      &:focus {
        box-shadow: unset;
      }
    }
  }

  input {
    border: none;
    box-shadow: 0 0 0 #ccc;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    transition: box-shadow 0.3s;
    width: 100%;

    &:focus {
      box-shadow: 0 3px 0 #ccc;
    }

    + label {
      display: none;
    }
  }

  label {
    @include media-breakpoint-up(md) {
      flex: 1 60%;
    }
  }

  .icon {
    width: 2rem;
  }
}