* {
  box-sizing: border-box;
}

.wrapper {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

input {
  color: var(--element-active-color, #1a1a1a);
  @mixin font-body;
  appearance: none;
  @mixin style style=normal;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  padding-right: 8px;
  padding-left: 8px;

  ::placeholder {
    color: var(--on-normal-neutral-color, rgba(0, 0, 0, 0.55));
  }

  .align-right & {
    text-align: right;
  }

  .align-center & {
    text-align: center;
  }

  .hasIcon & {
    padding-left: 40px;
  }

  .squared  & {
    border-radius: 0;
  }

  .font-button & {
    @mixin font-button;
  }
}

.icon {
  color: var(--on-normal-neutral-color, rgba(0, 0, 0, 0.55));
  border: 1px solid transparent;
  background-color: transparent;
  pointer-events: none;
  border-radius: 0 6px 6px 0;
  width: 40px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 8px;

  display: none;
  align-items: center;
  justify-content: center;

  .hasIcon & {
    display: flex;
  }

  & ::slotted([slot="icon"]){
    height: 24px;
    width: 24px;
  }
}