@use '../../foundations/colors/mixins.scss' as colorMixin;
@use '../../foundations/spacing/tokens.scss' as spacing;
@use '../../foundations/utilities/mixins.scss' as utilities;
@use '../../foundations/typography/mixins.scss' as typography;

.fudis-error-summary {
  &__title {
    @include utilities.box-reset;
    @include colorMixin.text-color('gray-dark');
    @include typography.body-text-md-regular;

    margin-top: spacing.$pixel-2;
  }

  &__error-list {
    @include utilities.box-reset;

    margin-top: spacing.$spacing-xs;
    margin-bottom: spacing.$pixel-2;
    padding-left: 0;
    list-style: none;

    &__item {
      position: relative;
      margin-left: spacing.$spacing-sm;
      padding-left: spacing.$spacing-xxs;

      &::before {
        @include colorMixin.bg-color('gray-dark');

        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(calc(-1 * #{spacing.$spacing-xs}), -50%);
        border-radius: spacing.$spacing-xxl;
        width: spacing.$pixel-3;
        height: spacing.$pixel-3;
        vertical-align: middle;
        content: '';
      }

      &:not(:last-of-type) {
        margin-bottom: spacing.$spacing-xs;
      }
    }
  }
}