@import "normalize.css/normalize";

//@import "@blueprintjs/core/lib/scss/variables.scss";

//@import "@blueprintjs/core/lib/css/blueprint";
//@import "@blueprintjs/select/lib/css/blueprint-select";
@import "@blueprintjs/icons/lib/css/blueprint-icons";

//@import "@blueprintjs/core/src/blueprint";
//@import "@blueprintjs/select/src/blueprint-select.scss";
//@import "@blueprintjs/icons/src/blueprint-icons.scss";

@import "blueprint-styler/base/blueprint-tokens";
@import "blueprint-styler/base/blueprint";
@import "blueprint-styler/base/tokens.scss";

.bp5-vars, :root {
  //--pt-icon-color: var(--pt-text-color);
}

.bp5-dark {
  --pt-icon-color: var(--pt-text-color);
  --menu-background-color: var(--tooltip-background-color);
}

:root.bpx-bpv3{
  @import "blueprint-styler/overrides/bpv3/custom-tokens.scss";
  @import "blueprint-styler/overrides/bpv3/override";
  @import "blueprint-styler/overrides/bpv3/override-tokens";
}

:root.bpx-antd {
  @import "blueprint-styler/overrides/antd/custom-tokens.scss";
  @import "blueprint-styler/overrides/antd/override";
  @import "blueprint-styler/overrides/antd/override-tokens";
}

:root.bpx-carbon {
  @import "blueprint-styler/overrides/carbon/custom-tokens.scss";
  @import "blueprint-styler/overrides/carbon/override";
  @import "blueprint-styler/overrides/carbon/override-tokens";
}

:root.bpx-flat {
  @import "blueprint-styler/overrides/flat/custom-tokens.scss";
  @import "blueprint-styler/overrides/flat/override";
  @import "blueprint-styler/overrides/flat/override-tokens";
}

:root.bpx-fluent {
  @import "blueprint-styler/overrides/fluent/custom-tokens.scss";
  @import "blueprint-styler/overrides/fluent/override";
  @import "blueprint-styler/overrides/fluent/override-tokens";
}

:root.bpx-pnnl {
  @import "blueprint-styler/overrides/pnnl/custom-tokens.scss";
  @import "blueprint-styler/overrides/pnnl/override";
  @import "blueprint-styler/overrides/pnnl/override-tokens";
}


@import "components/common";
@import "bpComponents/index";

:root { font-family: Inter, sans-serif; }

.bp5-vars, :root {
  --pt-text-color: var(--gray-1) !important;
  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
}
.bp5-dark {
  --pt-text-color: var(--light-gray2) !important;
  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
}

.bp5-form-group.bp5-inline label.bp5-label, .switch .bp5-label {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(8 * $pt-font-size-small);
  min-width: calc(8 * $pt-font-size-small);
  width: calc(8 * $pt-font-size-small);
  //font-size: $pt-font-size-small;
  height: $pt-input-height;
  line-height: normal;

  //white-space: nowrap;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  color: $dark-gray1;
  .bp5-dark & {
    color: $gray5;
  }

  font-size: 11px !important;
  font-weight: 450 !important;
}

.switch{
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row-reverse;
  margin-bottom: 0;
  height: $pt-input-height;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: $pt-font-size-small;
}

.formGroupContent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc($pt-grid-size / 2);
  //height: $pt-input-height; // todo: this will break the texture/image input
  flex-grow: 1;
}

:root{
  --background-color-transition-time: 0.2s;
  --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
}
.bp5-panel-stack2-view {
  background-color: $light-gray4 !important;
  transition: var(--background-color-transition);
}

.bp5-dark{
  .bp5-panel-stack2-view {
    background-color: $dark-gray1 !important;
  }
}

.bpInspectorCard {
  height: 100%;
  flex-grow: 1;
  position: relative;
  overflow-y: scroll;
  padding: 0 0 0 0;

  .bp5-panel-stack2-header{
    box-shadow: none;
  }
}
#blueprintUiContainer {
  height: 100%;
  overflow-y: scroll;
  padding: 0 0 0 0;

  position: fixed;
  top: 20px;
  right: 20px;
  width: var(--blueprint-ui-container-width);
  pointer-events: auto;
  max-height: calc(100% - 40px);
  border-radius: $pt-grid-size;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.numericInput {
  .bp5-input-group {
    flex-shrink: 1;
  }
}

.xPaddedContent {
  padding-left: $pt-grid-size;
  padding-right: $pt-grid-size;
}

.folderContent {
  flex: 1 1 auto;
  max-width: 100%;
  margin-left: calc($pt-grid-size * 0.5);
}

//button {
//  -webkit-tap-highlight-color: rgba(0,0,0,0);
//}
//input:focus {
//  outline: 0;
//  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);
//}

.bp5-control-group {
  .bp5-input-group{
    flex-grow: 1;
    flex-shrink: 1;
  }
}

.color-picker-popover{
  padding: calc($pt-grid-size / 2);
  width: max-content;
  background: $dark-gray1;
}

.inputGroupFile{
  input[type='file'] {
    width: 100%;
    min-width: calc($pt-grid-size * 15);
  }
}

.inspectorPanelStack {
  height: 100%;
}

.bp5-slider:not(.bp5-slider-vertical) {
  min-width: calc($pt-grid-size * 11);
}

.bp5-input, .bp5-file-upload-input {
  .bp5-dark & {
    //box-shadow: inset 0 0 0 1px $dark-gray5, inset 0 -1px 1px 0 $dark-gray1;
  }
}

.bp5-menu{
  padding: 0;
}

.bp5-button{
  user-select: none; // todo: why is this needed?
  transition: var(--background-color-transition);
}

.file-component-select{
  > select {
    padding-right: 18px;
    padding-left: 8px;
  }
  > .bp5-icon{
    right: 0px;
  }
}

.bp5-slider-handle{
  border-radius: 100%;
}

.bp5-collapse .bp5-collapse-body {
  transition: transform 0.3s var(--pt-transition-ease), opacity 0.3s;
}
.bp5-collapse {
  transition: height 0.3s var(--pt-transition-ease);
}

// todo move somewhere
.bp5-vars, :root {
  --slider-progress-color: hsla(var(--gray1-hsl), 0.2);
}

.bp5-dark {
  --slider-progress-color: hsla(var(--gray4-hsl), 0.15);
}

.bp5-slider-progress, .bp5-slider-track{
  height: 3px;
  top: calc($pt-grid-size - 3px)
}
.bp5-slider-handle{
  //background-color: hsla(var(--pt-intent-primary-hsl), 0.7) !important;
  background-color: hsla(var(--pt-intent-primary-hsl), 1) !important;
  //backdrop-filter: blur(4px);
}

.bp5-button.bp5-small {
  .bp5-button-text{
    font-size: $pt-font-size-small;
    padding: calc($pt-grid-size * 0.5) 0 calc($pt-grid-size * 0.5) 0;
  }
  .bp5-icon > svg{
    width: $pt-font-size;
    height: $pt-font-size;
  }
}

// todo not sure why its required again, its also in blueprint...
.bp5-dark .bp5-divider{
  border-color:rgba(255, 255, 255, 0.2);
}