@use 'sass:map';

/**
 * A container for rendering human-readable field values in forms in a way
 that makes them 'focusable' without rendering an actual input.
 */

.w-field__textoutput {
  @include input-base();
  @apply w-body-text-large;
  background-color: theme('colors.surface-field-inactive');
  width: 100%;
  padding: theme('spacing.[1.5]') theme('spacing.5');
  min-height: $text-input-height;
  position: relative;
  overflow: hidden;
  overflow-wrap: break-word;

  &,
  &:hover {
    border-color: theme('colors.border-field-inactive');
  }
}