@use '../../../../mx-core/src/base/shape';
@use '../../../../mx-core/src/base/typography';

:host {
  display: block;
  margin-top: -21px;
}

.mx-validation-rule-list {
  &__content {
    width: 100%;
    padding: 16px 16px 16px 12px;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }
  &__rule {
    @extend .gl-body-sm;
    display: flex;
    align-items: center;
    &:not(:last-of-type) {
      margin-bottom: 4px;
    }
    mat-icon {
      margin-right: 8px;
      width: 20px;
      height: 20px;
      min-width: 20px;
    }
    &__dot {
      padding: 8px;
      margin-right: 8px;
      &:before {
        @extend .rounded-full;
        content: '';
        display: block;
        width: 4px;
        height: 4px;
      }
    }
  }
}