@use '../variables.scss' as *;

// Specific to form text fields, layout, spacing, etc
// inputs/textareas etc

// The generatl field wrapper
.field {
  line-height: 24px;
  > label {
    margin-bottom: 2px !important;
    display: block !important;
    > .p-progress-spinner {
      height: 1em;
      width: 1em;
    }
  }
  > small.p-error {
    display: block !important;
  }

  // Text type inputs
  .p-inputtext {
    padding: 0.45rem;
    border-radius: 5px;
    &:hover,
    &:focus {
      border-color: $tenant-ui-secondary-active !important;
    }
    &:focus {
      box-shadow: 0 0 0.3rem 0.1rem $tenant-ui-shadow !important;
    }
  }

  // Fixing small bug in PrimeVue for input groups
  .p-inputgroup .p-inputtext {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .p-autocomplete-dd {
    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    button {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
  }
}
