.#{$ns}SearchBox {
  display: inline-flex;
  flex-direction: row;

  line-height: var(--Form-input-lineHeight);
  font-size: var(--Form-input-fontSize);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;

  height: 30px;
  width: 30px;
  padding: 0 8px;

  transition: all var(--animation-duration) ease-in-out;
  border: var(--Form-input-borderWidth) solid transparent;
  border-radius: var(--Form-input-borderRadius);

  &:hover {
    background: var(--Form-input-onHover-bg);
  }

  &.is-active {
    background: var(--Form-input-bg);
    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    width: 150px;
    > input {
      flex-grow: 1;
    }
  }

  &-activeBtn,
  &-searchBtn,
  &-cancelBtn {
    cursor: pointer;
    color: var(--icon-color);

    &:hover {
      color: var(--icon-onHover-color);
    }
  }

  &.is-disabled &-activeBtn,
  &.is-disabled &-searchBtn,
  &.is-disabled &-cancelBtn {
    color: var(--icon-onDisabled-color);
    pointer-events: none;
  }

  > input {
    outline: none;
    border: none;
    background: transparent;
    color: var(--Form-input-color);

    width: 0;
    height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));

    &::placeholder {
      color: var(--Form-input-placeholderColor);
      user-select: none;
    }
  }

  height: 30px;
}