.custom-input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.custom-input, .custom-input * {
  --vertical-padding: var(--input-vertical-padding, 14px);
  --horizontal-padding: var(--input-horizontal-padding, 24px);
}

.custom-input {
  display: flex;
  height: 70px;
  width: 100%;
  justify-content: center;
  padding: var(--vertical-padding) var(--horizontal-padding);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  background-color: var(--color-background-1);
  border: 1px solid;
  border-color: var(--color-accent-1);
  margin-bottom: 0px;
  overflow: hidden;
  transition: margin-bottom 300ms ease-in-out;
  position: relative;
}

.custom-input .currency-symbol {
  opacity: 0.5;
  position: absolute;
  left: calc(var(--input-horizontal-padding) - 14px);
  transform: translateY(-50%);
  top: calc(50%);
  transition: 0.3s ease-in-out;
  transition-property: top, opacity;
}


.custom-input[readonly] {
  opacity: 50%;
  pointer-events: none;
}

.custom-input input {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--horizontal-padding);
  width: calc(100% - 2 * var(--horizontal-padding));
  transition: 0.3s ease-in-out;
  transition-property: top, opacity;
}

/* Have to start with max-height here, so when  initially rendering the section the correct height is calculated */
.custom-input:has(textarea) {
    height: 280px;
    min-height: 70px;
    max-height: 280px;
    resize: vertical;
}

.custom-input textarea {
    resize: none;
    height: 100%;
}

.custom-input input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.custom-input input[type="number"] {
    -moz-appearance: textfield !important;
}

.custom-input.focused {
  box-shadow: 0 0 0 1px var(--color-input-focus);
}

.custom-input[error-message], .custom-input.focused[error-message] {
  box-shadow: 0 0 0 1px var(--color-input-error);
}

.custom-input[warning-message], .custom-input.focused[warning-message] {
  box-shadow: 0 0 0 1px var(--color-input-warning);
}

.custom-input.filled-in input {
  opacity: 1;
  top: calc(50% + 10px);
}

.custom-input.filled-in .currency-symbol {
  opacity: 1;
  top: calc(50% + 10px);
}

.custom-input.filled-in textarea {
  opacity: 1;
  top: calc(var(--vertical-padding) + 20px);
}

.custom-input .label {
  all: unset;top: 50%;
  transform: translateY(-50%);
  position: absolute;
  opacity: 0.5;
  color: var(--color-accent-4);
  font-size: 16px;
  line-height: 20px;

  transition: 0.3s ease-in-out;
  transition-property: top, opacity, line-height, font-weight, font-size;
}

.custom-input[textarea] .label {
  top: calc(var(--vertical-padding) + 10px);
  transform: unset;
}

.custom-input.filled-in .label {
  top: calc(50% - 10px);opacity: 0.7;
  line-height: 12.5px;
  font-weight: 800;
  font-size: 10px;
}

.custom-input.filled-in[textarea] .label {
  top: var(--vertical-padding);
}

.custom-input .clear-button {
  display: flex;
  opacity: 0;
  width: 12px;
  height: 12px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 48px;
  transition: 0.3s ease-in-out;
  transition-property: top, opacity;
  transform: translateY(-50%);
}

.custom-input.filled-in .clear-button {
  opacity: 1;
  top: calc(50% + 10px);
}

.custom-input .clear-button img {
  width: 100%;
  height: 100%;
}