@use 'pix-design-tokens/typography';

// List
.certification-issue-reports {
  &__title {
    margin-bottom: 16px;
    font-size: 1.25rem;
  }

  &__subtitle {
    margin: 0;
    padding: 0.75rem 1rem;
    font-weight: normal;
    font-size: 1rem;
    border-radius: 4px;

    &--with-action-required {
      color: var(--pix-secondary-700);
      background-color: var(--pix-warning-100);
    }

    &--without-action-required {
      color: var(--pix-neutral-500);
      background-color: var(--pix-neutral-20);
    }
  }

  &__list {
    width: 100%;
    padding-left: 0;

    button:last-of-type {
      margin-left: auto;
    }

    &--last {
      margin-bottom: 0;
    }
  }
}

// Item
.certification-issue-report {
  display: flex;
  align-items: center;
  border-bottom: var(--pix-neutral-15) solid 1px;

  &__resolution-status {
    width: 2rem;
    height: 2rem;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 24px;

    &--resolved {
      fill: var(--pix-success-700);
    }

    &--unresolved {
      fill: var(--pix-error-700);
    }
  }

  &__details {
    margin-left: 16px;

    &__label {
      color: var(--pix-neutral-500);
      font-weight: var(--pix-font-medium);

      @extend %pix-body-s;
    }

    &__resolution-message {
      color: var(--pix-neutral-100);

      @extend %pix-body-s;
    }
  }
}
