/**
 * ValidationErrorDisplay Styles
 *
 * When collapsed, panel sticks to footer (header bar only visible).
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.validation-error-display {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1rem;
  flex-shrink: 0;

  // Ensure proper spacing when used in different contexts
  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0.25rem;
  }

  // Collapsed: panel stays in footer as a slim bar (tabs + expand arrow only)
  &--collapsed {
    margin-bottom: 0;
    padding-bottom: 0.25rem;
  }

  // Integration with ErrorInfoNote component
  .error-info-note {
    width: 100%;
  }

  // Responsive adjustments
  @media (max-width: 768px) {
    margin-bottom: 0.75rem;

    &.validation-error-display--collapsed {
      margin-bottom: 0;
    }
  }

  @media (max-width: 576px) {
    margin-bottom: 0.5rem;

    &.validation-error-display--collapsed {
      margin-bottom: 0;
    }
  }
}