@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

@mixin validation-cell($sel, $color) {
  #{$sel} {
    a {
      color: lighten($color, 15%);
      background-color: rgba($color, .1);
      border-color: rgba($color, .4);

      &:hover {
        background-color: rgba($color, .15);
        border-color: rgba($color, .5);
      }
    }

    .badge {
      background-color: $color;
    }
  }
}

#validationReport {
  @include validation-cell('.level-error',    $col-negative);
  @include validation-cell('.level-warning',  $col-warning);
  @include validation-cell('.level-info',     $col-info);

  .badge {
    display: inline-block;
    padding: $spacing-1 $spacing-2;
    font-size: .9em;
    font-weight: 400;
    color: white;
    border-radius: $rounded-base;
  }

  a {
    display: inline-block;
    padding: 2px $spacing-1;
    text-decoration: none;
    border: 1px solid black;
    border-radius: $rounded-base;

    &::after {
      content: '↗';
      margin-left: $spacing-1;
      font-weight: bold;
      opacity: .75;
    }

    &:hover {
      &::after {
        opacity: 1;
      }
    }
  }

  .no-problems {
    color: $col-positive;
    padding-inline: $spacing-4;
  }
}
