.metadata-pill {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: light-dark(var(--color-gray-900), var(--color-zinc-100));
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
  background: linear-gradient(
    to bottom,
    light-dark(#ffffff, var(--color-zinc-800)) 0%,
    light-dark(#f0f0f0, var(--color-zinc-850)) 100%
  );
  border-radius: 0.875rem;
  border: 1px solid light-dark(var(--color-gray-300), var(--color-zinc-700));
  box-shadow: inset 0 1px 0
      light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.06)),
    inset 0 -1px 1px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.3)),
    0 1px 1px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4));
}

.metadata-pill__title {
  opacity: 0.8;
  font-weight: 600;
}

.metadata-pill__divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 0.75rem;
  background: light-dark(var(--color-gray-300), var(--color-zinc-700));
  box-shadow: 0 0 1px light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.5));
}

.metadata-pill__value {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.metadata-pill--handled-yes {
  background: linear-gradient(
    to bottom,
    light-dark(#f8fcf8, #172824),
    light-dark(#eef8ee, #12221c)
  );
  border-color: light-dark(#c0e0c0, #253d35);
  color: light-dark(#307030, #90d090);
}

.metadata-pill--handled-no {
  background: linear-gradient(
    to bottom,
    light-dark(#fcf8f8, #281717),
    light-dark(#f8eeee, #221212)
  );
  border-color: light-dark(#e0c0c0, #3d2525);
  color: light-dark(#703030, #d09090);
}

.metadata-pill--severity {
  background: linear-gradient(
    to bottom,
    light-dark(#f8f8fc, #1e1e2a),
    light-dark(#eeeef8, #181824)
  );
  border-color: light-dark(#c0c0e0, #353560);
  color: light-dark(#404080, #a0a0e0);
}

.metadata-pill--environment {
  background: linear-gradient(
    to bottom,
    light-dark(#fcfcf8, #242217),
    light-dark(#f8f4ee, #1e1c12)
  );
  border-color: light-dark(#e0d8c0, #4d4530);
  color: light-dark(#706040, #d0b890);
}

.metadata-pill--server {
  background: linear-gradient(
    to bottom,
    light-dark(#f8f8fc, #1e1e2f),
    light-dark(#eeeef8, #18182f)
  );
  border-color: light-dark(#c0c0e0, #3a3a70);
  color: light-dark(#404070, #b0b0e8);
}

.metadata-pill--timestamp {
  background: linear-gradient(
    to bottom,
    light-dark(#f9f9f9, #212126),
    light-dark(#f0f0f0, #1a1a1f)
  );
  border-color: light-dark(#c8c8c8, #35353a);
  color: light-dark(#505050, #b0b0b0);
}

.metadata-pill--release {
  max-width: 8rem;
  overflow: hidden;
  position: relative;
  background-color: light-dark(var(--color-white), var(--color-zinc-800));
  border: 1px solid light-dark(#eaeaea, #5b5a5a);
  color: light-dark(var(--color-blue-600), var(--color-blue-400));
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.1s;
  box-shadow: inset 0 -2.4px #3d3d3d0a;
  background-image: none;
  text-transform: none;

  &:hover {
    background-color: light-dark(var(--color-gray-50), var(--color-zinc-700));
  }

  &:active {
    background-color: light-dark(var(--color-gray-100), var(--color-zinc-700));
    box-shadow: inset 0 -1px #3d3d3d0a;
  }

  &:focus {
    outline: none;
    box-shadow: inset 0 -2.4px #3d3d3d0a,
      0 0 0 2px light-dark(var(--color-blue-600), var(--color-blue-300)),
      0 0 0 4px light-dark(transparent, #000000);
    background-color: light-dark(var(--color-gray-100), var(--color-zinc-700));
  }

  svg {
    flex-shrink: 0;
  }
}

.metadata-pill__version-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-pill--release > .metadata-pill__value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
}