.list-group-item {
  background-color: $list-group-bg;
  border-color: $list-group-border-color;
  color: $list-group-color;

  &.active {
    background-color: $list-group-action-active-bg;
    border-color: $list-group-action-active-bg;
    color: $list-group-action-active-color;
  }

  &.list-group-item-action {
    color: $list-group-action-color;

    &:hover,
    &:focus {
      background-color: $list-group-hover-bg;
      color: $list-group-action-color;
    }

    &.active {
      background-color: $list-group-action-active-bg;
      border-color: $list-group-action-active-bg;
      color: $list-group-action-active-color;
    }
  }

  // Contextual variants for dark theme
  &.list-group-item-primary {
    background-color: rgba($primary, 0.1);
    border-color: rgba($primary, 0.2);
    color: lighten($primary, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($primary, 0.2);
      color: lighten($primary, 15%);
    }
  }

  &.list-group-item-secondary {
    background-color: rgba($secondary, 0.1);
    border-color: rgba($secondary, 0.2);
    color: lighten($secondary, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($secondary, 0.2);
      color: lighten($secondary, 15%);
    }
  }

  &.list-group-item-success {
    background-color: rgba($success, 0.1);
    border-color: rgba($success, 0.2);
    color: lighten($success, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($success, 0.2);
      color: lighten($success, 15%);
    }
  }

  &.list-group-item-danger {
    background-color: rgba($danger, 0.1);
    border-color: rgba($danger, 0.2);
    color: lighten($danger, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($danger, 0.2);
      color: lighten($danger, 15%);
    }
  }

  &.list-group-item-warning {
    background-color: rgba($warning, 0.1);
    border-color: rgba($warning, 0.2);
    color: darken($warning, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($warning, 0.2);
      color: darken($warning, 25%);
    }
  }

  &.list-group-item-info {
    background-color: rgba($info, 0.1);
    border-color: rgba($info, 0.2);
    color: lighten($info, 20%);

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($info, 0.2);
      color: lighten($info, 15%);
    }
  }

  &.list-group-item-light {
    background-color: rgba($light, 0.8);
    border-color: rgba($light, 0.9);
    color: $body-color;

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($light, 0.9);
      color: $body-color;
    }
  }

  &.list-group-item-dark {
    background-color: rgba($dark, 0.1);
    border-color: rgba($dark, 0.2);
    color: $dark;

    &.list-group-item-action:hover,
    &.list-group-item-action:focus {
      background-color: rgba($dark, 0.2);
      color: $dark;
    }
  }
}

.discord-server-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.39);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  z-index: 10;
}