:host {
  --border-radius: 100px;
  --input-field-margin: 0;
  --label-font-size-floated: 11.0084px;
  --label-color: rgba(255, 255, 255, 0.5);
  --label-position-left: 7px;
  --label-position-top: 19px;
  --label-float-position-top: -3px;
  --label-padding: 0px 7px;
  --label-font-family: 'Gilroy-Regular', serif;
  --label-font-style: normal;
  --label-font-weight: 400;
  --label-font-size: 14px;
  --label-line-height: 160%;
  --input-font-color: rgba(255, 255, 255, 0.5);
  --input-font-family: 'Gilroy-Regular', serif;
  --input-font-size: 16px;
  --input-icon-color: #fe3c72;
  --input-height: 48px;
  --input-width: 100%;
  --input-border: none;
  --input-padding: 11px 15px;
  --input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
  --border: 3px solid #fe3c72;
  --input-number-filed-font: 'Open Sans', sans-serif;
  --dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
  --input-field-color: #fff;
}

:host {
  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .error-outline {
    display: block;
  }
  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .p-float-label {
    position: relative;
    z-index: 1;
  }
}

.content-wrapper {
  position: relative;
  display: flex;
  overflow: unset;
  margin: var(--input-field-margin);
  border-radius: var(--border-radius);
  height: var(--input-height);
  &.isDisabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.input-field-label {
  color: var(--label-color);
  position: absolute;
  pointer-events: none;
  left: var(--label-position-left, 6px);
  top: var(--label-position-top, 20px);
  padding: var(--label-padding, 0px 6px);
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  font-family: var(--label-font-family, 'Gilroy-Regular', serif);
  font-style: var(--label-font-style);
  font-weight: var(--label-font-weight);
  font-size: var(--label-font-size);
  line-height: var(--label-line-height);
  z-index: 2;
}

.p-float-label,
.input-field,
.input-field-readonly {
  position: relative;
  color: var(--input-field-color);
  box-sizing: border-box;
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  height: var(--input-height);
  width: var(--input-width);
  border: var(--input-border);
  border-radius: var(--border-radius);
  padding: var(--input-padding);
  margin: unset;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--input-field-box-shadow);
  -webkit-box-shadow: var(--input-field-box-shadow);
}

.input-field,
.p-calendar .p-inputtext,
.p-autocomplete .p-inputtext {
  &:focus {
    outline: none;
    ~ .input-field-label {
      top: var(--label-float-position-top);
      font-size: var(--label-font-size-floated);
    }
  }
}

.error-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: var(--border);
  border-radius: var(--border-radius);
  transform: matrix(1, 0, 0, -1, 0, 0);
  display: none;
}

.input-field-label-float {
  top: var(--label-float-position-top);
  font-size: var(--label-font-size-floated);
}

.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label textarea.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
  top: -0.1rem;
}

.spacer {
  flex: 1 1 auto;
}
