@import "~@alifd/next/lib/core/index-noreset"; // next core style
@import "./variables.scss";

.prism-code {
  padding: $b-design-prism-code-padding;
  position: relative;

  .#{$css-prefix}icon {
    position: absolute;
    right: $b-design-prism-code-copy-icon-r;
    bottom: $b-design-prism-code-copy-icon-b;
    color: #737373;
    cursor: pointer;
  }
}

.codesnippet-numberPre {
  text-align: left;
  margin: 1em 0;
  padding: 0px 0.5em 0px 0;
  overflow: auto;

  .token-line {
    display: flex;
  }

  .codesnippet-lineno,
  .codesnippet-linecontent {
    display: inline-block;
  }

  .token-line:first-child {
    .codesnippet-lineno {
      padding-top: $b-design-codesnippet-lineno-padding-top;
    }

    .codesnippet-linecontent {
      padding-top: $b-design-codesnippet-linecontent-padding-top;
    }
  }

  .token-line:last-child {
    .codesnippet-lineno {
      padding-bottom: $b-design-codesnippet-lineno-padding-bottom;
    }
  }

  .codesnippet-linecontent {
    padding-left: $b-design-codesnippet-linecontent-padding-left;
  }
}

.codesnippet-line {
  display: table-row;
}

.codesnippet-lineno {
  display: table-cell;
  text-align: right;
  margin-right: 16px;
  padding-right: 8px;
  user-select: none;
  width: 36px;
  // opacity: 0.5;
  color: #595959;
  background: #e5e5e5;
  font-size: 12px;
}

.codesnippet-linecontent {
  display: table-cell;
}


pre[class*="language-"].codesnippet-numberPre {
  padding: 0px 10px 0 0;

}