/* Thushara Builds — the terminal-style code / prompt block with a copy button. */

.tb-codeblock {
  border-radius: var(--wp--custom--radius--md);
  background-color: var(--wp--custom--code--bg);
  border: 1px solid var(--wp--custom--code--line);
  box-shadow: var(--wp--custom--shadow--md);
  overflow: hidden;
}

/* Two classes so this beats the generic .tb-prose > * rhythm rule. */
.tb-prose > .tb-codeblock {
  margin-block: var(--wp--preset--spacing--60);
}

.tb-codeblock__bar {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20)
    var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  background-color: var(--wp--custom--code--bar);
  border-block-end: 1px solid var(--wp--custom--code--line);
}

.tb-codeblock__label {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  margin-inline-end: auto;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--custom--code--muted);
}

.tb-codeblock__label .tb-icon {
  color: var(--wp--custom--code--accent);
}

.tb-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  border: 1px solid var(--wp--custom--code--line);
  border-radius: var(--wp--custom--radius--sm);
  background-color: transparent;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  color: var(--wp--custom--code--muted);
  transition: color var(--wp--custom--duration--fast)
      var(--wp--custom--easing--standard),
    border-color var(--wp--custom--duration--fast)
      var(--wp--custom--easing--standard),
    background-color var(--wp--custom--duration--fast)
      var(--wp--custom--easing--standard);
}

.tb-codeblock .tb-copy:hover {
  color: var(--wp--custom--code--text);
  border-color: var(--wp--custom--code--accent);
  background-color: var(--wp--custom--accent-wash);
}

.tb-codeblock .tb-copy:focus-visible {
  outline-color: var(--wp--custom--code--accent);
}

/* Feedback states outrank :hover — the pointer is still on the button. */
.tb-codeblock .tb-copy[data-state="copied"],
.tb-codeblock .tb-copy[data-state="copied"]:hover {
  color: var(--wp--custom--positive);
  border-color: var(--wp--custom--positive);
  background-color: transparent;
}

.tb-codeblock .tb-copy[data-state="error"],
.tb-codeblock .tb-copy[data-state="error"]:hover {
  color: var(--wp--custom--code--accent);
  border-color: var(--wp--custom--code--accent);
  background-color: transparent;
}

.tb-codeblock .tb-copy[data-state="copied"] .tb-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}

.tb-codeblock__pre {
  margin: 0;
  padding: var(--wp--preset--spacing--50);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: none;
  border: 0;
  /* Set on the block itself so the line-box strut matches the code. */
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--sm);
  /* Body is 500; light-on-dark already reads heavier, so the terminal stays 400. */
  font-weight: 400;
  line-height: 1.5;
}

.tb-codeblock__pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--wp--custom--code--text);
  white-space: pre;
  tab-size: 2;
  padding: 0;
  background: none;
}

.tb-codeblock__empty {
  margin: 0;
  padding: var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--code--muted);
}

@media print {
  .tb-copy {
    display: none;
  }
}