* {
  box-sizing: border-box;
}



.input {

  cursor: text;
  display: inline-flex;
  position: relative;
  font-style: normal;
  font-weight: var(--input-font-weight);
  width: inherit;

  font-family: var(--input-font-family);
  line-height: var(--input-line-height);
  color: var(--input-text-color);
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  transition: var(--input-transition);
  box-shadow: var(--input-box-shadow);
  gap: var(--input-item-spacing);
  text-align: var(--input-text-align);
  align-items: center;

  input {
    width: var(--input-width);
    padding: var(--input-padding);
    background-color: transparent;
    margin: 0em;
    border-radius: inherit;
    outline: none;
    max-width: 100%;
    flex: 1 0 auto;
    text-align: inherit;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    border: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    z-index: var(--page-layer-1);

    &::placeholder {
      color: var(--input-placeholder-color);
    }
  }

  .icon {
    position: absolute;
    z-index: var(--input-icon-index);
    right: var(--input-icon-right);
    width: var(--input-icon-width);
    pointer-events: none;
    margin: 0rem;
    &.clickable {
      pointer-events: auto;
      cursor: pointer;
    }

    + .label {
      right: var(--input-label-with-icon-right);
    }

  }

  .label {
    position: absolute;
    z-index: var(--page-layer-2);
    pointer-events: none;
    right: var(--input-label-right);
    display: inline-block;
    text-wrap: nowrap;
    margin-left: auto;
    line-height: 1;
    font-weight: var(--input-label-font-weight);
    color: var(--input-label-color);
    font-size: var(--input-label-font-size);
    padding: var(--input-label-padding);
    border: var(--input-label-border);
    border-radius: var(--input-label-border-radius);
  }
}