/* ===========================================
   Code Copy Button Styles
   =========================================== */

/* Wrapper provides positioning context */
.code-block-wrapper {
  position: relative;
  margin: var(--space-lg) 0;
}

/* Button positioned top-right within wrapper */
.copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;

  /* Visual styling */
  background-color: rgba(20, 19, 18, 0.7); /* semi-transparent sand-14 */
  backdrop-filter: blur(4px);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;

  /* Icon container */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hover interaction */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Show button on wrapper hover */
.code-block-wrapper:hover .copy-button,
.code-block-wrapper:focus-within .copy-button {
  opacity: 1;
  pointer-events: auto;
}

/* Button hover state */
.copy-button:hover {
  background-color: rgba(27, 25, 23, 0.8); /* slightly lighter sand-13 */
}

/* Keyboard focus state */
.copy-button:focus {
  opacity: 1;
  outline: 2px solid var(--orange-5);
  outline-offset: 2px;
}

/* Icon sizing and color */
.copy-button svg {
  width: 16px;
  height: 16px;
  stroke: var(--sand-5); /* light for contrast */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Icon hover state */
.copy-button:hover svg {
  stroke: var(--sand-3); /* brighter on hover */
}

/* Icon visibility states */
.copy-icon {
  display: block;
}

.check-icon {
  display: none;
}

/* Success state - swap icon visibility */
.copy-button.success .copy-icon {
  display: none;
}

.copy-button.success .check-icon {
  display: block;
}

/* Touch device support - show on first tap */
@media (hover: none) {
  .code-block-wrapper .copy-button {
    opacity: 0.7;
    pointer-events: auto;
  }

  .code-block-wrapper:hover .copy-button {
    opacity: 1;
  }
}