// blockly style更新
.blocklyToolboxDiv {
  background-color: #eee;
}

.blocklyHidden {
  display: none !important;
}
.blocklyTreeRow {
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding-right: 16px;
}
// 目录展开
.app-blockly-expanded {
  i {
    transform: rotateX(180deg);
    transition: all .3s;
  }
}
// 目录闭合
.app-blockly-collapsed {
  i {
    transform: rotateX(0deg);
    transition: all .3s;
  }
}
.app-blockly-selected {
  i {
    color: #fff;
  }
}
// flyout背景色
.blocklyFlyoutBackground {
  fill: #4b4949!important;
}
// flyout中label的颜色
.blocklyFlyoutLabelText {
  fill: #fff;
}
// mutator图标的背景色
.blocklyIconShape {
  fill: #aaa;
}
.blocklyDropDownDiv {
  .goog-menuitem {
    color: #fff;
    &:hover {
      background: #4b4949;
      opacity: .4;
    }
  }
  .goog-menuitem-content {
    color: unset;
  }
}

// 修改浏览器滚动条默认样式
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  // background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
}
::-webkit-scrollbar-track {
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #ccc;
  transition: all .2s;
  border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(95, 95, 95, 0.7);
}

// json格式化展示
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

:focus {
  outline-width: 0;
}
// blockly ul
.app-blockly-ul {
  display: flex;
  height: 100%;
  padding-inline-start: 0;
  margin-bottom: 0;
  background: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.app-blockly-li {
  display: flex;
  height: 100%;
  flex: 0 0 auto;
  list-style-type:none;
  background: #fafafa;
  color: rgba(0,0,0,.65);
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  margin-right: 4px;
  &:last-child {
    margin-right: 0;
    border: none;
  }
  input {
    height: 100%;
    background: none;
    border: none;
    width: .75em;
    &:focus {
      outline-width: 0;
    }
  }
}