.digit-card-textarea-field,
.digit-employee-card-textarea-field {
  @apply block outline-none w-full bg-white text-form-field overflow-x-hidden overflow-y-hidden whitespace-pre-wrap;


  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  color: theme(digitv2.lightTheme.text-primary);
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
  font-size: theme(digitv2.spacers.spacer4);
  line-height: theme(digitv2.spacers.spacer6);
  padding: theme(digitv2.spacers.spacer3) !important;
  padding-top: theme(digitv2.spacers.spacer2) !important;
  height: 6.25rem;
  min-height:theme(digitv2.spacers.spacer10);
  overflow-wrap: break-word;


  &.disabled {
    @apply text-grey-dark !important;
    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
    pointer-events: none !important;
    cursor: not-allowed;

  }

  &.noneditable {
    pointer-events: none !important;
    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
    background: theme(digitv2.lightTheme.generic-background);
    color: theme(digitv2.lightTheme.text-secondary);
  }

  &.error {
    border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
  }

  &:hover {
    overflow-y: auto;
  }

  &.resize-smart {
    min-height: 6rem;
    overflow: hidden;
    resize: none;
  }
}

textarea::-webkit-scrollbar {
  width: theme(digitv2.spacers.spacer2);
  background-color: theme(digitv2.lightTheme.generic-background);
}

textarea::-webkit-scrollbar-track {
  background-color: theme(digitv2.lightTheme.generic-background);
  border-radius: 0.563rem;
}

textarea::-webkit-scrollbar-thumb {
  background-color: theme(digitv2.lightTheme.generic-divider);
  border-radius: 0.563rem;
}

.digit-employee-card-textarea-field {
  @apply w-full;
  height: 6.25rem;

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
    /* Media query for tablets */
    max-width: 27.5rem;
    min-width: 12.5rem;
  }

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    max-width:100%;
    min-width: 9.75rem;
    width: 100%;
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    max-width: 37.5rem;
    min-width: 12.5rem;
  }
}

.digit-card-textarea-field:focus,
.digit-employee-card-textarea-field:focus {
  border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
  overflow-y: auto;
}

.digit-card-textarea-field.resize-smart:focus,
.digit-employee-card-textarea-field.resize-smart:focus,
.digit-card-textarea-field.resize-smart:hover,
.digit-employee-card-textarea-field.resize-smart:hover  {
  overflow: hidden; 
}