/* Styles for the code block and copy button */
.code-block-wrapper {
  position: relative;
  margin-top: 16px;
}

.code-block-wrapper pre {
  background-color: #f8f9fa;
  border: 1px solid var(--google-border-color);
  padding: 16px;
  padding-top: 48px; /* Add space at the top for the button */
  border-radius: 8px;
  font-family: "Courier New", Courier, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #f1f3f4;
  border: 1px solid var(--google-border-color);
  border-radius: 20px; /* Make it a pill shape or circle */
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.copy-button:hover {
  opacity: 1;
  background-color: #e8eaed;
}

.copy-button .material-icons {
  color: #3c4043;
  font-size: 20px;
}