/* TEXT FIELD */
.text-field{
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;
    border: solid 1px white;
    border-radius: 4px;
    margin: 40px 0;
    &:has(input.ng-untouched:focus),
    &:has(input:focus),
    &:has(select.ng-untouched:focus),
    &:has(select:focus) {
      border-color: rgba(73, 245, 116, 1);
      .unit {
        border-left-color:rgba(73, 245, 116, 1);
      }
    }
    &:has(input.ng-invalid),
    &:has(select.ng-invalid) {
      border-color: rgba(250, 0, 0, 1);
      .unit {
        border-left-color: rgba(250, 0, 0, 1);
      }
    }
    &:has(input.ng-untouched),
    &:has(select.ng-untouched) {
      border-color: rgb(105, 105, 105, 1);
      .unit {
        border-left-color: rgb(105, 105, 105, 1);
      }
    }
  
    label {
      font-size: 12px;
      line-height: 14px;
      font-weight: 500;
      position: absolute;
      left: 12px;
      top: -7px;
      background-color: rgba(22, 22, 22, 1);
      padding: 0 4px;
    }
    input,
    textarea,
    select {
      background-color: transparent;
      border: none;
      outline: none;
      color: white;
      font-size: 16px;
      line-height: 18px;
      font-weight: 400;
      margin: 7px 4px 7px 14px;
      width: 100%;
      option {
        color: black;
      }
    }
    input {
      height: 40px;
    }
    textarea {
      margin-top: 15px;
      margin-bottom: 15px;
      resize: none;
      overflow: hidden;
    }
    .unit {
      padding: 0 20px;
      border-left: 1px solid white;
      height: 54px;
      line-height: 54px;
    }
    .mention {
      position: absolute;
      left: 16px;
      bottom: -16px;
      &.error-message {
        color: rgba(250, 0, 0, 1);
      }
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  
    /* Firefox */
    input[type="number"] {
      -moz-appearance: textfield;
    }
  }
  
    /* CARD */
    .card {
      background-color: rgba(0, 0, 0, 1);
      border-radius: 24px;
    }