.v-input__slot {
  margin-bottom: 0;
}

.pkg-base-n-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--layout-spacing-unit) * 3px);
}

.pkg-base-n-input .n-input-label-hint-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--layout-space-1);
}

.pkg-base-n-input .n-input-slot {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  transition: all .3s ease-in-out;
  border: 1px solid rgba(67, 83, 99, 0.40);
  gap: var(--layout-space-3);
}

.pkg-base-n-input .n-input-slot .n-input-icon-wrapper {
  width: 20px;
  height: 20px;
}

.pkg-base-n-input .n-input-slot .n-input-icon-wrapper:after,
.pkg-base-n-input .n-input-slot .n-input-icon-wrapper:before {
  font-size : 20px;
}

.pkg-base-n-input .n-input-slot .n-input-icon-wrapper:hover {
  cursor: pointer;
}

.pkg-base-n-input .n-input-slot .n-input-field {
  flex: 1;
  outline: none;
}

.pkg-base-n-input .n-input-slot .n-input-field,
.pkg-base-n-input .n-input-slot .n-input-field::placeholder {
  color: rgba(67, 83, 99, 0.40);
}

.pkg-base-n-input .n-input-helper-text {
  text-align: start;
  color: rgba(67, 83, 99, 0.60);
  width: 100%;
}

.pkg-base-n-input:focus-within .n-input-slot {
  background: #FFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  border-color: var(--layout-main-font-color);
}

/* ? Filled state */
.pkg-base-n-input.n-input--filled .n-input-slot {
  border: 1px solid rgba(67, 83, 99, 0.40);
}

.pkg-base-n-input.n-input--filled:focus-within .n-input-slot {
  box-shadow: unset;
}

/* ? Error state */
.pkg-base-n-input.n-input--error .n-input-label-hint-wrapper .n-input-label {
  color: var(--layout-danger-color);
  text-align: start;
}

.pkg-base-n-input.n-input--error .n-input-slot {
  background: #FFF;
  border: 1px solid var(--layout-danger-color);
}

.pkg-base-n-input.n-input--error .n-input-helper-text {
  color: var(--layout-danger-color);
}

.pkg-base-n-input.n-input--error:focus-within .n-input-slot {
  box-shadow: unset;
  border: 1px solid var(--layout-danger-color);
}

/* ? Disabled state */
.pkg-base-n-input.n-input--disabled {
  cursor: not-allowed;
}

.pkg-base-n-input.n-input--disabled .n-input-slot {
  border: 1px solid rgba(67, 83, 99, 0.40);
  background: #E2E2E2;
}