@import '../../styles/responsive';

.inputWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .iconButton {
    border: none;
    background: transparent;
    margin: 0 5px 0 20px;

    @include respond-below(sm) {
      margin: 0 5px 0 10px;
    }
  }

  .closeScoutBar {
    display: none;
    margin: 0px 10px 0px 0px;
    border: none;
    background: transparent;
    padding: 6px 6px;
    border-radius: 50%;
    svg {
      width: 23px;
    }
    @include respond-below(sm) {
      display: block;
    }
  }

  svg {
    path {
      fill: var(--scout-theme-grey);
    }
  }

  .inputField {
    width: 100%;
    height: auto;
    position: relative;

    input {
      padding: 18px 10px;
      border: none;
      -webkit-appearance: none;
      font-family: inherit;
      font-size: inherit;
      font-weight: 400;
      width: 100%;
      box-sizing: border-box;
      background: transparent;
      cursor: text;
      transition: all 0.2s;
      touch-action: manipulation;
      color: var(--scout-theme-black);

      &::placeholder {
        color: var(--scout-theme-grey);
      }

      &:focus {
        outline: none;
      }
    }
  }

  &:focus-within {
    .inputIcon {
      path {
        @supports (fill: currentColor) {
          fill: currentColor;
        }
      }
    }
  }
}
