base.css

:root {
  --preview-distance: 0px;
  --preview-max-height: 75px;
  --more-options-top: 0px;
  --more-options-left: 0px;
}

#code-snippet-extension {
  background-color: var(--jp-layout-color0);
  overflow: auto;
}

.jp-codeSnippet-fileDialog label {
  margin-bottom: 5px;
}

/*Code Snippet Container CSS*/
.jp-codeSnippetsContainer-button,
.jp-codeSnippetsContainer-button.jp-mod-styled {
  background-color: transparent;
  vertical-align: middle;
  padding: 0;
  padding-right: 8px;
}

.jp-codeSnippetsContainer-button:hover {
  cursor: pointer;
}

.jp-codeSnippetsContainer-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  height: 30px;
  color: var(--jp-ui-font-color0);
}

.jp-codeSnippetsContainer-name {
  font-size: var(--jp-ui-font-size1);
  white-space: nowrap;
  overflow: hidden;
  color: var(--jp-ui-font-color0);
  display: flex;
  align-items: center;
  width: 100%;
}

.jp-codeSnippetsContainer-name span:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
}

.jp-codeSnippet-name:hover {
  cursor: pointer;
}

.jp-codeSnippetsContainer-button {
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  height: 100%;
}

/* Size of the icons in code snippet */
.jp-codeSnippetsContainer-action-buttons {
  height: 100%;
  overflow: hidden;
}

.jp-codeSnippet-item {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
  display: flex;
  margin: 0;
  padding: 0;
  height: fit-content;
  cursor: context-menu;
}

.jp-codeSnippet-item:hover {
  background-color: var(--jp-layout-color2);
}

#jp-codeSnippet-rename {
  background-color: var(--jp-layout-color2);
  border: 1px solid var(--jp-layout-color1);
  border-radius: 4px;
  font-size: var(--jp-ui-font-size1);
  box-sizing: border-box;
  margin: 0px;
}

.jp-codeSnippet-metadata {
  flex-basis: 95%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: hidden;
}

.jp-codeSnippet-description p {
  font-size: var(--jp-ui-font-size0);
  line-height: 15px;
  color: var(--jp-layout-color4);
  margin-bottom: 10px;
  width: 90%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Header bar of code snippets */
.jp-codeSnippetsHeader {
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px;
  color: var(--jp-ui-font-color0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Save Notification CSS */
.jp-codeSnippet-confirm {
  position: absolute;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--jp-dialog-background);
}

.jp-codeSnippet-Message-content {
  background: var(--jp-layout-color1);
  display: flex;
  align-items: center;
  padding: 0px;
  padding-left: 40px;
  border-top: 7px solid #388e3c;
  width: 250px;
  min-width: 200px;
  min-height: 50px;
  box-sizing: border-box;
  box-shadow: var(--jp-elevation-z20);
  word-wrap: break-word;
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color1);
  margin: auto 6px 30px auto;
  resize: none;
}

.jp-codeSnippet-Message-content .jp-Dialog-header {
  padding: 0px;
}

.jp-codeSnippet-Message-content .jp-Dialog-footer {
  padding: 0px;
}

.jp-codeSnippet-Message-body {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.jp-codeSnippet-confirm-text {
  width: 183px;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  text-align: left;
  padding-left: 10px;
}

/* Code Snippet Preview CSS */
.jp-codeSnippet-preview {
  position: absolute;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: var(--preview-distance);
}

.jp-codeSnippet-preview.inactive {
  display: none;
}

.jp-codeSnippet-preview-content {
  background: var(--jp-layout-color1);
  padding: 5px;
  width: 180px;
  height: fit-content;
  max-height: var(--preview-max-height);
  /*height: 106px;*/
  box-sizing: border-box;
  box-shadow: var(--jp-elevation-z2);
  word-wrap: break-word;
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color1);
  margin: 10px 10px 10px 0px;
}

/* Code Snippet Drag and Drop CSS */
.jp-codeSnippet-drag-hover-selected {
  background-image: url(./icon/dragtab_jupyter.svg);
  margin-right: -2px;
  background-color: var(--jp-layout-color2);
  background-position: center;
  background-repeat: no-repeat;
}

.jp-codeSnippet-drag-image {
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  background: var(--jp-cell-editor-background);
  width: var(--jp-private-notebook-dragImage-width);
  height: var(--jp-private-notebook-dragImage-height);
}

.jp-codeSnippet-item.jp-codeSnippet-dropTarget {
  border-top: 2px solid var(--jp-private-notebook-selected-color);
}

.jp-codeSnippet-drag-hover {
  flex-basis: 5%;
  min-width: 20px;
  padding-right: 5px;
  margin-right: 5px;
  cursor: move;
}

/* Code Snippet Editor CSS */
.jp-codeSnippet-editor-title {
  margin-left: 2%;
  margin-top: 2%;
  margin-bottom: 20px;
  color: var(--jp-ui-font-color0);
  font-size: 25px;
}

.jp-codeSnippet-editor-label {
  margin-left: 2%;
  margin-bottom: 5px;
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color0);
}

.jp-codeSnippet-editor-name,
.jp-codeSnippet-editor-description {
  display: block;
  margin-left: 2%;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  width: 94%;
  height: 32px;
  font-size: var(--jp-ui-font-size1);
  border-radius: 2px;
  background: var(--jp-input-background);
  box-sizing: border-box;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  padding-left: 7px;
  padding-right: 7px;
  color: var(--jp-ui-font-color0);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-top: 5px;
  margin-bottom: 15px;
}

.jp-codeSnippet-editor-language {
  display: block;
  margin-bottom: 20px;
  margin-left: 2%;
  width: 176px;
  height: 32px;
  font-size: var(--jp-ui-font-size1);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none; /* chrome and safari */
  -moz-appearance: none; /* Mozilla */
  -ms-appearance: none; /* Internet explorer */
  color: var(--jp-ui-font-color0);
  outline: none;
  background: var(--jp-input-background);
  box-sizing: border-box;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  padding-left: 7px;
  padding-right: 7px;
  background-image: url(./icon/jupyter_searcharrowdown.svg);
  background-repeat: no-repeat;
  background-position: 95% center;
  margin-top: 5px;
}

.jp-codeSnippet-editor-language:hover {
  background-image: none;
}

.jp-codeSnippet-editor-tagList {
  list-style: none;
  margin-left: 2%;
  margin-bottom: 8px;
  margin-top: -8px;
}

.jp-codeSnippet-editor-tag {
  margin-left: 3px;
  margin-right: 3px;
}

.jp-codeSnippet-editor-tag button {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--jp-ui-font-color2);
  padding: 0;
  font-size: var(--jp-ui-font-size1);
}

.jp-codeSnippet-editor-tag input {
  border: none;
  background: transparent;
}

.jp-codeSnippet-editor-tag.applied-tag button {
  color: var(--jp-ui-font-color1);
}

.jp-codeSnippet-editor-tag.unapplied-tag button {
  color: var(--jp-ui-font-color2);
}

.jp-codeSnippet-editor-tag.tag.unapplied-tag input {
  border: none;
  background: transparent;
}

.jp-codeSnippet-editor-active {
  border: 1px solid var(--jp-cell-editor-active-border-color);
  background-color: var(--jp-input-active-background);
}
.jp-codeSnippetInputArea {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 98.5%;
  padding-left: 12px;
}

.jp-codeSnippetInputArea-editor {
  overflow: auto;
  margin-left: 2%;
  margin-right: 3%;
  margin-top: 5px;
}

.jp-codeSnippetInput-editor {
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  border-radius: 0px;
  background: var(--jp-cell-editor-background);
}

.jp-codeSnippetInput-editor.active {
  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
  box-shadow: var(--jp-input-box-shadow);
  background-color: var(--jp-cell-editor-active-background);
}

.jp-codeSnippetInput-editor .CodeMirror.cm-s-jupyter {
  background: transparent;
}

.jp-codeSnippetInputArea .saveBtn {
  width: 10%;
  background: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color0);
  align-self: flex-end;
  margin-top: 12px;
  margin-right: 3%;
  margin-bottom: 12px;
}

/* code snippet create button */
.jp-createSnippetBtn {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0px;
}

/* @import url('~@jupyterlab/codeeditor/style/index.css'); */

/* Code Snippet Filter CSS */
.jp-codeSnippet-searchbar {
  margin: 0px 8px;
}

.jp-codeSnippet-filterTools {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
}

mark.jp-codeSnippet-search-bolding {
  background-color: transparent;
  font-weight: bold;
  color: var(--jp-ui-font-color0);
}

.jp-codeSnippet-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 10px 0 10px;
}

.jp-codeSnippet-filter .jp-codeSnippet-filter-btn {
  align-self: flex-end;
  padding: 0px;
  padding-bottom: 10px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--jp-brand-color2);
}

.jp-codeSnippet-filter-arrow-up.idle,
.jp-codeSnippet-filter-option.idle {
  display: none;
}

.jp-codeSnippet-filter-arrow-up {
  position: absolute;
  margin-top: 20px;
  border: var(--jp-border-width) solid var(--jp-border-color2);
  border-width: 0 var(--jp-border-width) var(--jp-border-width) 0;
  padding: 4px;
  margin-right: 38px;
  align-self: flex-end;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  background-color: var(--jp-layout-color0);
}

.jp-codeSnippet-filter-option {
  border: var(--jp-border-width) solid var(--jp-border-color2);
  height: 140px;
  width: 100%;
  margin-bottom: 10px;
  overflow: auto;
}

.jp-codeSnippet-filter-title {
  text-transform: uppercase;
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size1);
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
  margin: 10px 10px;
  padding-bottom: 5px;
}

.jp-codeSnippet-filter-tags {
  margin: 0px 8px;
}

.jp-codeSnippet-filter-tag {
  margin-left: 3px;
  margin-right: 3px;
}

.jp-codeSnippet-filter-tag button {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--jp-ui-font-color2);
  padding: 0;
  font-size: var(--jp-ui-font-size1);
}

.jp-codeSnippet-tools {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
}

/* Code Snippet Tags in InputDialog */
.jp-codeSnippet-inputTagList {
  list-style: none;
}

.jp-codeSnippet-inputTag {
  margin-left: 8px;
  margin-right: 8px;
}

.jp-codeSnippet-inputTag button {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--jp-ui-font-color2);
  padding: 0;
  font-size: var(--jp-ui-font-size1);
}

.jp-codeSnippet-inputTag input {
  font-size: var(--jp-ui-font-size1);
  background: none;
  border: none;
  color: var(--jp-ui-font-color2);
  padding: 0;
  font-size: var(--jp-ui-font-size1);
  width: 50px;
}

.jp-codeSnippet-tags {
  margin-top: 8px;
}

/* .jp-codeSnippet-tag,
.jp-codeSnippet-inputTag,
.jp-codeSnippet-filter-tag {
  height: 5px;
} */

/* USER Input Form Style
.jp-codeSnippet-form {
  position: absolute;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--jp-dialog-background);
} */

/* .jp-codesnippet-editor-name:required {
    border-color: #808080;
    border-width: 3px;
  } */

.jp-codeSnippet-dialog-name-input.touched:invalid,
.jp-codeSnippet-dialog-desc-input.touched:invalid,
.jp-codeSnippet-dialog-lang-input.touched:invalid,
.jp-codeSnippet-editor-name.touched:invalid,
.jp-codeSnippet-editor-description.touched:invalid,
.jp-codeSnippet-editor-language.touched:invalid {
  border: var(--jp-border-width) solid var(--jp-error-color1);
}

.jp-codeSnippet-dialog-name-input.jp-mod-styled,
.jp-codeSnippet-dialog-desc-input.jp-mod-styled,
.jp-codeSnippet-dialog-lang-input.jp-mod-styled {
  margin-bottom: 10px;
  font-size: var(--jp-ui-font-size1);
}

.jp-codeSnippet-inputName-validity,
.jp-codeSnippet-inputDesc-validity {
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color1);
  margin: 5px;
  margin-bottom: 8px;
}

.jp-codeSnippet-editor-metadata .jp-codeSnippet-inputName-validity,
.jp-codeSnippet-editor-metadata .jp-codeSnippet-inputDesc-validity {
  margin-bottom: 20px;
  margin-top: 5px;
  margin-left: 3%;
}

/* 3 Dots Dropdown On Code Snippet */
.jp-codeSnippet-options {
  position: absolute;
  z-index: 10000;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: transparent;
}

.jp-codeSnippet-options.inactive {
  display: none;
}

.jp-codeSnippet-more-options-content {
  width: 183px;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  text-align: left;
}

.jp-codeSnippet-options-content {
  background: var(--jp-layout-color1);
  padding: 10px;
  border: 1px solid var(--jp-border-color0);
  width: 180px;
  box-sizing: border-box;
  box-shadow: var(--jp-elevation-z1);
  word-wrap: break-word;
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color1);
  position: absolute;
  top: var(--more-options-top);
  left: var(--more-options-left);
}

.jp-codeSnippet-options-body {
  display: flex;
  align-items: center;
}

.jp-codeSnippet-more-options-copy {
  padding-bottom: 5px;
  cursor: pointer;
}

.jp-codeSnippet-more-options-copy:hover {
  background-color: var(--jp-layout-color2);
  cursor: pointer;
}

.jp-codeSnippet-more-options-insert {
  padding-bottom: 5px;
  cursor: pointer;
}

.jp-codeSnippet-more-options-insert:hover {
  background-color: var(--jp-layout-color2);
  cursor: pointer;
}

.jp-codeSnippet-more-options-edit {
  padding-bottom: 5px;
  cursor: pointer;
}

.jp-codeSnippet-more-options-edit:hover {
  background-color: var(--jp-layout-color2);
  cursor: pointer;
}

.jp-codeSnippet-more-options-delete {
  color: var(--jp-error-color0);
  cursor: pointer;
}

.jp-codeSnippet-more-options-delete:hover {
  background-color: var(--jp-layout-color2);
  cursor: pointer;
}

.jp-codeSnippet-more-options-export {
  color: var(--jp-brand-color0);
  padding-bottom: 5px;
  cursor: pointer;
}

.jp-codeSnippet-more-options-export:hover {
  background-color: var(--jp-layout-color2);
  cursor: pointer;
}

.jp-dropdown-delete-button {
  border: none;
}

.jp-dropdown-cancel-button {
  outline: 1px solid var(--jp-brand-color1);
  outline-offset: 4px;
}