@use 'sass:math';

lf-validation-panel {
  .validation-panel-container {
    margin-bottom: $validation-panel-height;
  }

  .card {
    position: fixed;
    bottom: 0;
    height: $validation-panel-height;
    z-index: $zindex-fixed;

    @include media-breakpoint-up(sm) {
      @include make-col(12);
    }
    @include media-breakpoint-up(md) {
      @include make-col(9);
      @include make-col-offset(3);
    }
    @include media-breakpoint-up(xl) {
      @include make-col(10);
      @include make-col-offset(2);
    }

    left: math.div($grid-gutter-width, 2);
    right: math.div($grid-gutter-width, 2);

    &.border-danger {
      border-bottom: none;
    }
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-header {
    padding: 0.5rem 1.2rem;
    align-items: flex-start;
  }

  .header-title {
    font-size: 1.2rem;
  }

  .card-body {
    width: 100%;
    overflow-y: auto;
    font-size: $form-feedback-font-size;
    color: $body-color;

    &.bg-secondary {
      background-color: rgba(theme-color('secondary'), 0.125) !important;
    }
    &.bg-danger {
      background-color: rgba(theme-color('danger'), 0.125) !important;
    }
    &.bg-warning {
      background-color: rgba(theme-color('warning'), 0.125) !important;
    }
    &.bg-success {
      background-color: rgba(theme-color('success'), 0.125) !important;
    }
    a {
      text-decoration: underline;
    }
  }

  .pending {
    @include loading($pending-panel-size, $pending-panel-border-size);
    margin: $spacer auto 0;
  }

  .validation-issue p:last-child {
    margin-bottom: 0;
  }

  .panel-pages-number {
    align-self: center;
  }
}