.badge {
  @each $component, $color in $otel-component-colors {
    &.badge-#{$component} {
      color: white;
      background-color: $color;
    }
  }

  @each $component, $color in $otel-registry-license-colors {
    &.badge-#{$component} {
      color: white;
      background-color: $color;
    }
  }

  &.badge-elixir {
    color: map-get($otel-component-colors, erlang);
    background-color: inherit;
    border: solid 1px;
  }

  &.badge-js {
    color: inherit;
  }

  &.badge-kotlin {
    color: map-get($otel-component-colors, java);
    background-color: inherit;
    border: solid 1px;
  }

  // Default color attributes, in case we miss a component definition above;
  // which has happened, see https://github.com/open-telemetry/opentelemetry.io/pull/2481.
  $default-otel-badge-bg: $yellow;
  color: color-contrast($default-otel-badge-bg);
  background-color: $default-otel-badge-bg;
}

.registry-entry {
  @extend .shadow;
}

#searchForm .btn.btn-outline-success,
.btn-outline-danger,
.btn-outline-secondary {
  &:hover {
    color: var(--bs-white);
  }
}

@include color-mode(dark) {
  @media (prefers-color-scheme: dark) {
    .border-default {
      border-color: #a3a3a3;
    }
    .card.registry-entry {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    }
    .card.registry-entry,
    .list-group > .list-group-item {
      background-color: #262d2c;
    }
  }
}