@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";
@use "input";

.hoo-input-search {
  // @extend .hoo-input-group;
  display: flex;
  flex-direction: row;
  flex-grow: 0;

  .hoo-icon {
    background-color: colors.$neutral-700;
  }

  .hoo-input-text {
    @include input.base-input;

    height: 2rem;
    width: calc(100% - 2rem);

    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .hoo-icon {
    @include input.base-input;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    padding-right: core.px2rem(5px);
    padding-left: core.px2rem(5px);

    transition: all .1s;

    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    fill: currentColor;
  }

  &:focus-within {

    .hoo-icon,
    .hoo-input-text {
      height: core.px2rem(32px);

      border-width: core.px2rem(2px);
      border-color: colors.$theme-600;
      outline: 0 rgba(255, 255, 255, 0) solid;
    }

    .hoo-input-text {
      width: 100%;
    }

    .hoo-icon {
      overflow: hidden;

      max-width: 0;
      padding: 0;
    }
  }
}