//
// Role
// --------------------------------------------------

//.role-container {
//  display: flex;
//  margin-right: -$padding-base-horizontal;
//  margin-bottom: -$padding-base-vertical;
//  flex-wrap: wrap;
//
//  &-editable {
//    .role:not(.active) {
//      cursor: pointer;
//
//      &:hover,
//      &:focus {
//        @include opacity(0.8);
//      }
//    }
//  }
//}

.role {
  .avatar {
    &:before {
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
    }
  }

  @mixin role($color, $icon) {
    .avatar {
      @include avatar-color-variation($color);

      &:before {
        content: $icon;
      }
    }

    &.dropdown-toggle .fa:before,
    .role-icon:before {
      content: $icon;
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
    }

    &.role-dropdown-item a {
      &,
      &:hover {
        &,
        .dropdown-menu-item-icon {
          color: $color;
        }
      }

      .dropdown-menu-item-icon {
        &:before {
          content: $icon;
          font-family: $font-family-awesome;
          font-weight: $font-family-awesome-weight;
        }
      }
    }
  }

  &.role-9 {
    @each $theme, $map in $themes {
      .#{$theme} & {
        $text-color: map-get($map, color-text-default);

        @include role($text-color, "\f1e5");
      }
    }
  }

  &.role-8 {
    @include role($brand-info, "\f1b3");

    &.dropdown-toggle {
      @include button-variant($btn-info-bg, $brand-info-dark-new);
    }

    &.label:not(.label-user) {
      @include label-info();
    }
  }

  &.role-7 {
    @include role($brand-info, "\f0e8");

    &.dropdown-toggle {
      @include button-variant($btn-info-bg, $brand-info-dark-new);
    }

    &.label:not(.label-user) {
      @include label-info();
    }
  }

  &.role-6 {
    @include role($brand-success, "\f0c0");

    &.dropdown-toggle {
      @include button-variant($btn-success-bg, $brand-success-dark-new);
    }

    &.label:not(.label-user) {
      @include label-success();
    }
  }

  &.role-5 {
    @include role($brand-info, "\f0e3");

    &.dropdown-toggle {
      @include button-variant($btn-info-bg, $brand-info-dark-new);
    }

    &.label:not(.label-user) {
      @include label-info();
    }
  }

  &.role-4 {
    @include role($brand-primary, "\f1ea");

    &.dropdown-toggle {
      @include button-variant($btn-primary-bg, $brand-primary-dark-new);
    }

    &.label:not(.label-user) {
      @include label-primary();
    }
  }

  &.role-3 {
    @include role($brand-warning, "\f06e");

    &.dropdown-toggle {
      @include button-variant($btn-warning-bg, $brand-warning-dark-new);
    }

    &.label:not(.label-user) {
      @include label-warning();
    }
  }

  &.role-2 {
    @include role($brand-warning, "\f2c2");

    &.dropdown-toggle {
      @include button-variant($btn-warning-bg, $brand-warning-dark-new);
    }

    &.label:not(.label-user) {
      @include label-warning();
    }
  }

  &.role-1 {
    @each $theme, $map in $themes {
      .#{$theme} & {
        $text-color: map-get($map, color-text-default);

        @include role($text-color, "\f1e5");
      }
    }
  }
}