.roles-config {
  &__group {
    margin-top: spacing(0);

    h2 {
      margin-top: spacing(-3);
    }
  }

  &__roles-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(-1 * #{spacing(-1)});
  }

  &__role-list {
    max-width: none;

    &--compact {
      margin: spacing(-4) 0;

      .roles-config__role {
        margin: 0 spacing(-1) spacing(-1) 0;
      }
    }

    &__item {
      h3 {
        margin-top: spacing(-1);
        margin-bottom: spacing(-2);
      }
    }
  }

  &__role {
    display: flex;
    margin: 0 spacing(-1) spacing(-1) 0;

    &__content {
      padding: spacing(-3) spacing(-2);
      margin-right: spacing(-4);

      &__item {
        @include icon-style {
          display: inline-block;
          margin-right: spacing(-4);
        }

        &--period {
          @include set-font(0, 'single', $weight: 'bold');

          @include set-icon("calendar", $include-pseudo: "before");
        }

        &--infinite {
          @include icon-style($position: "after") {
            @include set-icon("infinity");
            display: inline-block;
            margin-left: spacing(-4);
          }
        }

        &--source {
          @include set-icon("source-system", $include-pseudo: "before");
        }
      }
    }

    &__actions {
      display: flex;
      flex-direction: column;
    }
  }

  display: none;

  &--active {
    display: block;
  }

  &__user-information {
    display: flex;
    flex-wrap: wrap;

    &__group {
      display: flex;
      margin: 0 spacing(-1) 0 0;

      dt {
        margin-right: spacing(-3);
      }

      dd {
        margin-left: 0;
      }
    }
  }

  .tabbed-content>.nav~section {
    margin-top: spacing(-1);
  }
}