.x-level {
  overflow: auto;
  max-height: 18rem;
  min-height: 10rem;
  padding: 0.5rem;
  background-color: theme-color("light-transparent");
  border: 1px solid $border-color;

  ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    overflow: hidden;
  }

  li {
    cursor: pointer;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    white-space: nowrap;
    border-radius: $border-radius;

    &.active {
      @include custom-theme-color(primary, color);
    }

    @include hover-focus {
      background-color: theme-color("light-secondary");
    }
  }

  &-link {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;

    span {
      overflow: hidden;
    }
  }

  &-icon {
    margin-right: 0.5rem;
  }

  &-0 { padding-left: 0 }
  &-1 { padding-left: 1rem }
  &-2 { padding-left: 2rem }
  &-3 { padding-left: 3rem }
  &-4 { padding-left: 4rem }
  &-5 { padding-left: 5rem }
  &-6 { padding-left: 6rem }

}

.x-modal-alert .modal-body .x-level {
  .x-icon {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    line-height: 1rem !important;
  }
}