:host {
  display: block;
  /** Background color for code block */
  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);
  /** Font size for code block pre element */
  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);
  /** Font family for code block pre element */
  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
}

[hidden] {
  display: none !important;
}

#container {
  margin: 0;
  /** Top padding for code block content */
  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);
  /** Right padding for code block content */
  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);
  /** Bottom padding for code block content */
  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);
  /** Left padding for code block content */
  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);
}

#header {
  /** Border bottom width for code block header */
  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid
    /** Border bottom color for code block header */
    var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
}

pre {
  margin: 0;
}

slot[name="actions"] {
  display: flex;
  justify-content: end;
}

#expanded {
  display: inline;
}

button {
  display: flex;
  background: none;
  border: none;
  padding: 6px 16px 6px 0;
  color: #06c;
  cursor: pointer;
  font-size: 16px;
}

button svg {
  color: #151515;
  margin-right: 12px;
  transition: .2s ease-in 0s;
  vertical-align: -0.125em;
}

.expanded button svg {
  transform: rotate(-90deg);
}