btu-search-input {
  display: inline-block;
}

.SearchInput {
  --Input-focusBackground: transparent;

  position: relative;
  width: 100%;

  label {
    color: var(--Input-placeholderColor);
    height: var(--Icon-size);
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: calc(50% - var(--Icon-size) / 2);
    width: var(--Icon-size);

    &::before {
      .Icon;

      content: 'search';
      top: 0;
    }
  }

  input[type] {
    padding-left: calc(var(--Icon-size) + var(--gap-xs));
    width: 100%;
  }

  button,
  input[type='submit'] {
    display: none;
  }

  &:hover,
  &:focus-within {
    label {
      color: var(--Input-focusColor);
    }
  }
}

.SearchInput.is-filter {
  background: var(--color-gray2);
  border-radius: calc(var(--gap-s) + var(--Text-height) / 2);
  margin: var(--gap-m) calc(0px - var(--gap-l) / 2);
  padding: 0 calc(var(--gap-l) / 2);
  width: calc(100% + var(--gap-l));

  label {
    left: calc(var(--gap-l) / 2);
  }

  input[type] {
    &,
    &:hover,
    &:focus {
      border-color: transparent;
    }
  }
}
