/* code-header

*/

@mixin code-header {

.code-header {
  @extend .bg-light;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  font-size: small; 

  &--description {
    &-code {
      &:before { @extend .fas; content: fa-content($fa-var-code); padding-right: 5px; }
    }
    &-python {
      &:before { @extend .fab; content: fa-content($fa-var-python); padding-right: 5px; }
    }
    &-terminal {
      &:before { @extend .fas; content: fa-content($fa-var-terminal); padding-right: 5px; }
    }
    &-key {
      &:before { @extend .fas; content: fa-content($fa-var-key); padding-right: 5px; }
    }
    &-markdown {
      &:before { @extend .fab; content: fa-content($fa-var-markdown); padding-right: 5px; }
    }
  }

  &--button {
    .copy-code-button {
      @extend .btn, .btn-light, .shadow-none, .btn-sm;
      border-radius: 0px;
      display: grid;
      grid-auto-flow: column;
      align-items: center;
      grid-column-gap: 4px;
      border: none;
      cursor: pointer;
      font-size: small;

      &:before {
        @extend .fas;
        content: fa-content($fa-var-clipboard);
      }
      &:after {
        content: "Copy";
      }

      // This class will be toggled via JavaScript
      &.copied {
        &:before {
          @extend .fas;
          content: fa-content($fa-var-clipboard-check);
        }
        &:after {
          content: "Copied!";
        }
      }
    }
  }
}

}