@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.diagram-palette {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  border-right: $diagram_border;
}

:global {
  .diagram-palette-dark-scrollbar {
    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background: #323233;
      border-radius: 4px;
      border: none;
      outline: none;
    }

    ::-webkit-scrollbar-thumb {
      background: #131111;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #1e1e1e;
    }
  }

  .e-accordion {
    background: $diagram_palette_bg;

    .e-symbol-draggable>svg>g>g>g>g>g>path {
      fill: $diagram_content_fill_dark;
    }

    .e-acrdn-item,
    .e-acrdn-item.e-select {
      background-color: transparent;
      border-top: $diagram_border !important;
      border-bottom: $diagram_border !important;

      .e-expand-icon {
        color: $diagram_palette_accrdn_fg !important;

        &:hover {
          color: $diagram_icon_expand_hover !important;
        }
      }

      .e-acrdn-header,
      .e-acrdn-header:hover {
        background: $diagram_palette_accrdn_sel_bg;

        .e-acrdn-header-content {
          display: inline-block;
          padding-left: 10px;
          font-size: 15px;
          line-height: 35px;
          cursor: pointer;
          white-space: nowrap;
          color: $diagram_palette_accrdn_fg !important;

          &:hover {
            color: $diagram_palette_accrdn_sel_fg;
          }
        }

        .e-toggle-icon {
          color: $diagram_palette_accrdn_fg !important;

          .e-accordion .e-tgl-collapse-icon::before {
            color: $diagram_palette_accrdn_sel_fg !important;
          }
        }
      }

      &.e-select.e-selected.e-expand-state,
      &.e-select.e-expand-state,
      &.e-item-focus.e-select.e-expand-state {

        .e-acrdn-header,
        .e-acrdn-header:focus {
          background: $diagram_palette_accrdn_sel_bg;

          .e-acrdn-header-content {
            color: $diagram_palette_accrdn_sel_fg;
          }

          .e-toggle-icon {
            color: $diagram_palette_accrdn_sel_fg;
          }
        }
      }
    }

    .e-acrdn-item.e-selected.e-select.e-active {
      background-color: $diagram_palette_active_bg;
    }
  }

  .e-symbolpalette .e-acrdn-content {
    background-color: $diagram_palette_bg !important;
  }

  .e-symbolpalette .e-symbol-hover:hover {
    background: $diagram_palette_item_bg_hover;
  }

  .e-symbolpalette .e-symbol-selected {
    background-color: $diagram_palette_item_bg_selected;
  }
}