.wp-block-nhk-code-block,
.nhk-code-block {
  --nhk-code-font-size-pc: 14px;
  --nhk-code-font-size-mobile: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1.5em 0;
  overflow: hidden;
  border: 1px solid #454545;
  border-radius: 8px;
  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
}

.nhk-code-block--dark {
  --nhk-code-bg: #17191d;
  --nhk-code-fg: #e8eaf0;
  --nhk-code-toolbar: #24272d;
  --nhk-code-line: #9aa2ad;
  --nhk-code-highlight: #343a46;
  --nhk-code-border: #414650;
  background: var(--nhk-code-bg);
  color: var(--nhk-code-fg);
}

.nhk-code-block--light {
  --nhk-code-bg: #f5f6f8;
  --nhk-code-fg: #20242b;
  --nhk-code-toolbar: #e7e9ed;
  --nhk-code-line: #626a75;
  --nhk-code-highlight: #dce6f3;
  --nhk-code-border: #c5cbd4;
  border-color: var(--nhk-code-border);
  background: var(--nhk-code-bg);
  color: var(--nhk-code-fg);
}

.nhk-code-block__toolbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--nhk-code-toolbar);
  color: var(--nhk-code-fg);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.nhk-code-block__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.nhk-code-block__label[hidden],
.nhk-code-block__gutter[hidden] {
  display: none;
}

.nhk-code-block__actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nhk-code-block__copy-status {
  min-width: 0;
  color: inherit;
  font-size: 11px;
}

.nhk-code-block__copy-status.is-error {
  color: #ff8e8e;
}

.nhk-code-block__copy {
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid var(--nhk-code-border, #50545d);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nhk-code-block__copy:hover,
.nhk-code-block__copy:focus-visible {
  background: var(--nhk-code-highlight);
}

.nhk-code-block__pre {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px 0;
  overflow: hidden;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--nhk-code-font-size-pc);
  line-height: 1.6;
  tab-size: 2;
}

.nhk-code-block__pre:focus-visible,
.nhk-code-block__code:focus-visible {
  outline: 2px solid #7bb7ff;
  outline-offset: -2px;
}

.nhk-code-block__gutter {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 3.5em;
  padding: 0 1em 0 0.75em;
  border-right: 1px solid var(--nhk-code-border, #414650);
  color: var(--nhk-code-line);
  text-align: right;
  user-select: none;
}

.nhk-code-block__line-number,
.nhk-code-block__line {
  display: block;
  box-sizing: border-box;
  min-height: 1.6em;
  line-height: 1.6;
}

.nhk-code-block__line-number {
  padding: 0 0.5em;
}

.nhk-code-block__line-number.is-highlighted,
.nhk-code-block__line.is-highlighted {
  background: var(--nhk-code-highlight);
}

.nhk-code-block__code {
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  scrollbar-width: thin;
}

.nhk-code-block__line {
  width: max-content;
  min-width: 100%;
  padding-right: 16px;
  white-space: pre;
}

.nhk-code-block__token--comment { color: #8b949e; }
.nhk-code-block__token--string { color: #a5d6a7; }
.nhk-code-block__token--keyword { color: #ff7b72; }
.nhk-code-block__token--number,
.nhk-code-block__token--constant { color: #79c0ff; }
.nhk-code-block__token--function { color: #d2a8ff; }
.nhk-code-block__token--builtin,
.nhk-code-block__token--type { color: #ffa657; }
.nhk-code-block__token--tag { color: #7ee787; }
.nhk-code-block__token--attr-name,
.nhk-code-block__token--property { color: #79c0ff; }
.nhk-code-block__token--operator,
.nhk-code-block__token--punctuation { color: #c9d1d9; }
.nhk-code-block__token--variable { color: #ffa657; }
.nhk-code-block__token--selector { color: #7ee787; }
.nhk-code-block__token--color { color: #ff9bce; }
.nhk-code-block__token--diff-add { color: #aff5b4; background: rgb(46 160 67 / 18%); }
.nhk-code-block__token--diff-remove { color: #ffdcd7; background: rgb(248 81 73 / 18%); }

.nhk-code-block--light .nhk-code-block__token--comment { color: #68717d; }
.nhk-code-block--light .nhk-code-block__token--string { color: #176b2c; }
.nhk-code-block--light .nhk-code-block__token--keyword { color: #b42318; }
.nhk-code-block--light .nhk-code-block__token--number,
.nhk-code-block--light .nhk-code-block__token--constant { color: #0550ae; }
.nhk-code-block--light .nhk-code-block__token--function { color: #8250df; }
.nhk-code-block--light .nhk-code-block__token--builtin,
.nhk-code-block--light .nhk-code-block__token--type { color: #9a4d00; }
.nhk-code-block--light .nhk-code-block__token--tag,
.nhk-code-block--light .nhk-code-block__token--selector { color: #116329; }
.nhk-code-block--light .nhk-code-block__token--attr-name,
.nhk-code-block--light .nhk-code-block__token--property { color: #0550ae; }
.nhk-code-block--light .nhk-code-block__token--operator,
.nhk-code-block--light .nhk-code-block__token--punctuation { color: #59636e; }
.nhk-code-block--light .nhk-code-block__token--variable { color: #9a4d00; }
.nhk-code-block--light .nhk-code-block__token--color { color: #bf3989; }
.nhk-code-block--light .nhk-code-block__token--diff-add { color: #116329; }
.nhk-code-block--light .nhk-code-block__token--diff-remove { color: #b42318; }

@media (max-width: 767px) {
  .nhk-code-block__pre {
    font-size: var(--nhk-code-font-size-mobile);
  }
}