// Import our custom variables and bootstrap
// Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
@import './custom.scss';
@import './bootstrap_imports.scss';

:root {
  --dh-svg-inline-icon-size: 16px;

  color: var(--dh-color-text);

  .spectrum-theme-provider {
    // This is important for portals with rounded corners (e.g. Popover) so that
    // the underlying background color shows.
    --dh-spectrum-theme-provider-bg: unset;

    background-color: var(--dh-spectrum-theme-provider-bg);
    color: var(--dh-color-text);
  }
}

//Various non-variable css overides
//Overide default size from 16px to 14px. We need density.
html {
  font-size: 14px;
  min-height: 100%;
}

// override
.text-black-50 {
  color: bg-opacity(50) !important;
}
.text-white-50 {
  color: fg-opacity(50) !important;
}

// deephaven-icons are designed on a 16px grid
// and look best at that size. Default icon size back to 16px
// vertical alignment changed to best match icon set against 14px text
.svg-inline--fa {
  font-size: var(--dh-svg-inline-icon-size);
  vertical-align: -3px;
}

body {
  min-height: 100%;
  background-color: $background;
  color: $foreground;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -ms-scroll-chaining: none;
}

#root {
  .app {
    background-color: $background;
    height: 100vh;
    width: 100vw;
  }
}

/** Convenience **/

.fill-parent-absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroll-pane,
.scroll-pane-x,
.scroll-pane-y {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.no-scroll-x {
  overflow-x: hidden;
}

.no-scroll-y {
  overflow-y: hidden;
}

.drag-pointer-events-none {
  pointer-events: none;
  cursor: grabbing;
}

a.btn-link,
a.btn-link-icon,
a.custom-link,
.markdown-editor-container a {
  outline: 0;
  position: relative;

  &:focus {
    &::after {
      content: '';
      box-sizing: content-box;
      position: absolute;
      background: accent-opacity(10);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: $border-radius;
      border: 1px solid $primary;
      box-shadow: $input-btn-focus-box-shadow;
    }
  }
}

/********** BUTTONS *********/

button:focus {
  outline: 0; // it's fine, we've set our own focus states.
}

//Make btns a minumum size
.btn {
  min-width: 7rem;
  // Matching Spectrum styles
  -webkit-font-smoothing: antialiased;
  // the following is to match spectrum buttons
  height: 32px;
  // vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // match spectrum button custom padding
  padding: 4px 14px 3px 14px;
  gap: 6px;

  .svg-inline--fa {
    padding-bottom: 2px;
  }
}

.btn-sm {
  height: 28px;
  line-height: 28px;
}

span.btn-disabled-wrapper {
  display: inline-block;
  .btn.disabled,
  .btn:disabled {
    pointer-events: none;
  }
}

// We use disabled success buttons as success messages in a few places.
// We should stop doing that, and phase them out when we have toasts.
.btn-success {
  &.disabled,
  &:disabled {
    --dh-color-text-disabled: var(--dh-color-positive-contrast);
    --dh-color-disabled-bg: var(--dh-color-positive-bg);

    opacity: 0.5;
  }
}

.btn-link {
  min-width: unset;
  padding: $spacer-1;

  .svg-inline--fa {
    align-self: center;
  }

  &:not(.btn-link-icon) {
    border: $input-border-width solid transparent;
    border-radius: $border-radius;

    &:focus {
      background: accent-opacity(10);
      border: $input-border-width solid $primary;
      box-shadow: $input-btn-focus-box-shadow;
    }

    &:hover {
      background: accent-opacity(15);
    }

    &:active {
      content: '';
      background: accent-opacity(30);
    }
  }
}

// can be set on other btn-modifiers, be more specific to override
.btn.btn-cancelable:hover {
  background-color: $danger;
  border-color: $danger;

  &:focus {
    box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
  }

  &:not(:disabled):not(.disabled):active {
    background: var(--dh-color-negative-down-bg);
    border-color: var(--dh-color-negative-down-bg);
    box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
  }
}

.btn .btn-hover-content,
.btn:hover .btn-normal-content {
  display: none;
}

.btn:hover .btn-hover-content {
  display: inline-block;
}

.btn-spinner {
  padding: $btn-padding-y 1rem;
}

.btn-link.no-underline,
.btn-link.no-underline:hover {
  text-decoration: none;
}

.btn-small {
  min-width: 0;
  padding: 4px;
}

.btn-link-icon {
  position: relative;
  border: 0;
  padding-left: $spacer-1;
  padding-right: $spacer-1;

  &::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: $input-border-width solid transparent;
    border-radius: $border-radius;
    height: 100%;
    padding-left: calc(100% - #{$input-border-width} * 2);
    // padding used in place of width, still need to account for border width
    transition: $btn-transition;
  }

  &:focus {
    outline: none;
    text-decoration: none;
    box-shadow: none;
    &::after {
      background: accent-opacity(10);
      border: $input-border-width solid $primary;
      box-shadow: $input-btn-focus-box-shadow;
    }
  }

  &:hover {
    &::after {
      background: accent-opacity(15);
    }
  }

  &:active {
    &::after {
      content: '';
      background: accent-opacity(30);
    }
  }
}

.btn-icon {
  // used in chart builder and conditional formatting
  text-align: center;
  padding: 0;
  min-width: 0;
  font-size: small;
  text-overflow: ellipsis;
  border-radius: 0;
  height: auto;
  flex-direction: column;
  gap: 3px;
  color: var(--dh-color-text);

  svg,
  img {
    display: block;
    background: var(--dh-color-action-bg);
    margin: auto;
    border-radius: 2px;
    margin-bottom: 2px;
    filter: saturate(0%);
    transition:
      filter 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
    pointer-events: none;
  }

  &:hover,
  &:focus,
  &.active {
    color: var(--dh-color-text);
    svg,
    img {
      box-shadow: 0 0 0 2px var(--dh-color-action-hover-border);
      filter: saturate(100%);
    }
  }

  &:focus,
  &.active {
    outline: none;
    box-shadow: none;
    color: $primary;

    svg,
    img {
      box-shadow: 0 0 0 2px var(--dh-color-action-active-border);
    }
  }
}

.btn-inline {
  min-width: 2.75rem;
  padding: 0 $spacer-1;
  border-radius: $border-radius;
  background: var(--dh-color-action-bg);
  border: 1px solid var(--dh-color-action-border);
  color: var(--dh-color-action-fg);
  font-weight: $font-weight-normal;

  .svg-inline--fa {
    align-self: center;
  }

  &.active {
    border-color: var(--dh-color-action-active-border);
    background: var(--dh-color-action-active-bg);
    color: var(--dh-color-action-active-fg);

    &:focus-visible {
      border: 1px solid $input-focus-border-color;
    }

    &:not(:disabled):not(.disabled):hover {
      color: var(--dh-color-action-active-hover-fg);
      background: var(--dh-color-action-active-hover-bg);
      border-color: var(--dh-color-action-active-hover-border);
    }
  }

  &.disabled,
  &:disabled {
    background-color: var(--dh-color-action-disabled-bg);
    border: 1px solid var(--dh-color-action-disabled-border);
    color: var(--dh-color-action-disabled-fg);
    opacity: 1;
    cursor: not-allowed;
  }

  &:focus-visible {
    border: 1px solid $input-focus-border-color;
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: var(--dh-color-action-hover-bg);
    border: 1px solid var(--dh-color-action-hover-border);
    color: var(--dh-color-action-hover-fg);
  }

  &:not(:disabled):not(.disabled):active {
    background: var(--dh-color-action-down-bg);
  }
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  // look more disabled
  background-color: $secondary;
  border-color: $secondary;
  opacity: 0.35;
}

.btn-group {
  /* stylelint-disable-next-line no-descending-specificity -- keep btn-group together */
  > .btn-inline:not(:first-child) {
    margin-left: -1px;
  }

  > .btn-ghost:not(:first-child) {
    margin-left: 0;
  }

  > .btn:not(:first-child):not(:hover):not(:focus) {
    &.btn-primary {
      border-left: $btn-border-width solid $primary-hover;
    }
    &.btn-secondary {
      border-left: $btn-border-width solid $gray-600;
    }
    &.btn-danger {
      border-left: $btn-border-width solid $danger-hover;
    }
  }
}

.btn-link-icon-only {
  padding-left: $spacer-2;
  padding-right: $spacer-2;
}

/********** TABLES *********/

//Tabular numbers apply to tables only
table,
.table {
  font-feature-settings: 'tnum';
}

/********** FORMS *********/

form label {
  color: $gray-200;
}

form label small {
  color: $gray-400;
}

.form-control.focus,
.form-control:focus {
  border: 1px solid var(--dh-color-input-focus-border);
  box-shadow: none;
}

.form-control.is-invalid,
.form-control.is-invalid:focus {
  border-color: var(--dh-color-form-control-error);
  background-image: var(--dh-svg-icon-error);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
}

.form-control.btn:focus-visible {
  box-shadow: $input-btn-focus-box-shadow;
}

.form-control:disabled {
  border-color: var(--dh-color-input-disabled-border);
  color: var(--dh-color-input-disabled-fg);
}

.form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--dh-color-input-hover-border);
}

.form-control:disabled::placeholder {
  color: $gray-500;
}

.form-control[type='password'] {
  letter-spacing: 0.2rem;
}

//Select, Checkboxes and Radios
.custom-control-label {
  user-select: none; //checkboxs are label pseudo elements, clicking can toggle text selection otherwise
}

.custom-control-input:disabled ~ .custom-control-label::before {
  cursor: not-allowed;
}

.custom-checkbox
  .custom-control-input:disabled
  ~ .custom-control-label::before {
  cursor: not-allowed;
}

.custom-radio {
  .custom-control-input:checked ~ .custom-control-label {
    &::after {
      mask: escape-svg($custom-radio-indicator-icon-checked) 4px / 6px 6px
        no-repeat;
      background: var(--dh-color-input-bg);
    }
  }
}

.custom-checkbox {
  .custom-control-input:checked ~ .custom-control-label {
    &::after {
      mask: escape-svg($custom-checkbox-indicator-icon-checked) 50%/75% 75%
        no-repeat;
      background: var(--dh-color-input-bg);
    }
  }

  .custom-control-input:indeterminate ~ .custom-control-label {
    &::after {
      mask: escape-svg($custom-checkbox-indicator-icon-indeterminate) 50%/65%
        65% no-repeat;
      background: var(--dh-color-input-bg);
    }
  }

  .custom-control-input:disabled {
    &:checked ~ .custom-control-label::before {
      border: var(--dh-color-input-disabled-fg);
    }
    &:indeterminate ~ .custom-control-label::before {
      border: var(--dh-color-input-disabled-fg);
    }
  }
}

.custom-select {
  $caret-size: 10px 6px;
  $error-size: 16px;

  background-image: var(--dh-svg-icon-select-indicator);
  background-size: $caret-size;

  &:focus {
    box-shadow: none;
  }

  &.is-invalid,
  &.is-invalid:focus {
    border-color: var(--dh-color-form-control-error);
    background-size: $caret-size, $error-size;
    background-image: var(--dh-svg-icon-select-indicator),
      var(--dh-svg-icon-error);
  }
  &.is-invalid:hover {
    background-image: var(--dh-svg-icon-select-indicator-hover),
      var(--dh-svg-icon-error);
  }
  &.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
  }
}

.custom-select:disabled {
  color: var(--dh-color-text-disabled);
  background-color: var(--dh-color-input-disabled-bg);
  border-color: var(--dh-color-input-disabled-border);
  background-image: var(--dh-svg-icon-select-indicator-disabled);
  opacity: 1;
  &.is-invalid {
    background-image: var(--dh-svg-icon-select-indicator-disabled),
      var(--dh-svg-icon-error);
  }
}

.custom-select:hover:not(:disabled) {
  background-color: var(--dh-color-selector-hover-bg);
  background-image: var(--dh-svg-icon-select-indicator-hover);
  border-color: var(--dh-color-input-hover-border);
}

input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

//Dropdowns on text inputs
/* stylelint-disable no-descending-specificity -- keep with input section */
.input-group-append .btn {
  background-color: $input-bg;
  padding: $btn-padding-y 0.5rem;
}

.input-group > .input-group-append > .btn {
  min-width: auto;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.input-group > .input-group-append.cb-dropdown > .btn {
  border: 1px solid $input-border-color;

  &:focus {
    border-color: $input-focus-border-color;
  }
  &:disabled {
    background-color: $input-disabled-bg;
    border-color: var(--dh-color-input-disabled-border);
    .cb-caret {
      background-color: var(--dh-color-icon-disabled-fg);
    }
  }
}
/* stylelint-enable no-descending-specificity */

//Hide the default dropdown caret, in favor of implicitly adding our own via svg and fontawesome
.input-group-append .dropdown-toggle::after {
  display: none;
}

//Add extra
.search-group.console-menu {
  padding: $spacer-1;

  .search-icon {
    right: $spacer-3;
  }
}

/********** Modal Styling *********/

// No using default modal styling

/********** Browser Default Overides *********/
::selection {
  //blink/webkit
  color: $foreground;
  background: var(--dh-color-text-highlight);
  opacity: 1;
}

::-moz-selection {
  //moz
  color: $foreground;
  background: var(--dh-color-text-highlight);
  opacity: 1;
}

.masked-input::selection {
  //blink/webkit
  background: var(--dh-color-text-highlight);
  opacity: 1;
}

.masked-input::-moz-selection {
  //moz
  background: var(--dh-color-text-highlight);
  opacity: 1;
}

// make width same as monaco scrollbar
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

// style the same as monaco scrollbar
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--dh-color-scrollbar) 18%, transparent);
  border-radius: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

::-webkit-scrollbar-corner {
  background: bg-opacity(10);
}

::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid
    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
}

::-webkit-scrollbar-track:vertical {
  border-left: 1px solid
    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--dh-color-scrollbar) 25%, transparent);
}

::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--dh-color-scrollbar) 35%, transparent);
}

/********** Monaco Overides *********/
//Note many monaco style are set inline, making overrides require !important

// fixes IDS-7262 where 'hidden' aria-container impacts firefox layout, remove if resolved
// https://github.com/microsoft/monaco-editor/issues/2168
.monaco-aria-container {
  display: none;
}

.monaco-editor {
  // Hide the "Loading..." and "No suggestions" message in the suggest widget in monaco to make it feel faster
  .editor-widget.suggest-widget.message,
  .parameter-hints-widget.message {
    display: none;
  }

  .monaco-hover hr {
    margin-bottom: 4px !important; // Monaco sets this to -4 which causes items below a dividing line to collide w/ the line
  }

  .parameter-hints-widget {
    z-index: 30 !important; // Need to make above golden-layout, but below completion item widget at z=40
  }

  .find-widget {
    &.visible {
      // For some reason the height of this is set improperly in 0.18.1
      min-height: 34px;
      textarea.input {
        min-height: 23px;
      }
    }

    .button {
      box-sizing: border-box;
      border: 1px solid transparent;
    }

    :focus:not(.input) {
      outline: 0;
      border: 1px solid $input-focus-border-color !important;
      box-shadow: $input-btn-focus-box-shadow;
    }

    .monaco-checkbox:focus {
      border: none !important;
      box-shadow:
        $input-btn-focus-box-shadow,
        0 0 0 1px $input-focus-border-color; //can't use regular border due to position of checkbox
    }
  }

  .monaco-inputbox {
    border-radius: $border-radius;

    &.synthetic-focus {
      border: 1px solid $input-focus-border-color !important;
      outline: 0 !important;
    }

    .input {
      outline: 0 !important;
    }
  }
}

/********** Browser Hacks *********/

//Moz specific hacks
/* stylelint-disable-next-line function-url-quotes */
@-moz-document url-prefix() {
  $caret-position: right $custom-select-padding-x;
  $error-position: right (1 + $custom-select-padding-x);
  $svg-caret: var(--dh-svg-icon-select-indicator);
  $svg-caret-hover: var(--dh-svg-icon-select-indicator-hover);
  $svg-error: var(--dh-svg-icon-error);

  //Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inherit...
  //Hack: turn the background to inherit, then apply a background gradient that is inputbg color to inputbg color
  //for crossbrowser consistency this gradient is stacked bellow the svg used to get a caret (indicator) looking the same
  .custom-select {
    background-color: inherit !important;
    color: $foreground;
    // bg image, size and position for 2 layers
    background-image: $svg-caret, solid-gradient($input-bg);
    background-size:
      10px 6px,
      cover;
    background-position-x: $caret-position, center;
    background-position-y:
      bottom 50%,
      center;
    background-repeat: no-repeat;

    //make the dotted duplicate focus line on firefox go away
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 $foreground !important;
    }

    &:hover {
      background-image: $svg-caret-hover, solid-gradient($input-bg);
    }

    &.is-invalid,
    &.is-invalid:focus {
      // bg image, size and position for 3 layers
      background-image: $svg-caret, $svg-error, solid-gradient($input-bg);
      background-size:
        10px 6px,
        16px,
        cover;
      background-position-x: $caret-position, $error-position, center;
    }

    &.is-invalid:hover {
      background-image: $svg-caret-hover, $svg-error, solid-gradient($input-bg);
    }

    &:disabled {
      background-image: $svg-caret, solid-gradient($input-disabled-bg);

      &.is-invalid {
        background-image: $svg-caret, $svg-error,
          solid-gradient($input-disabled-bg);
      }
    }
  }

  .console-creator .custom-select {
    background-image: var(--dh-svg-icon-select-indicator),
      solid-gradient($gray-700);

    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 $foreground !important;
    }
  }

  .custom-select option {
    color: #3a4148;
  }
}

/** Generic Animations **/
.fade-enter {
  opacity: 0.01;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity $transition ease-out;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0.01;
  transition: opacity $transition ease-out;
}

.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter-active {
  transform: none;
  transition: transform $transition-mid ease-out;
}

.slide-left-exit {
  transform: none;
}

.slide-left-exit-active {
  transform: translate3d(100%, 0, 0);
  transition: transform $transition-mid ease-out;
}

.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}

.slide-right-enter-active {
  transform: none;
  transition: transform $transition-mid ease-out;
}

.slide-right-exit {
  transform: none;
}

.slide-right-exit-active {
  transform: translate3d(-100%, 0, 0);
  transition: transform $transition-mid ease-out;
}

/// used by marching ants animation
@keyframes march {
  from {
    background-position:
      0 top,
      0 bottom,
      left 0,
      right 0;
  }

  to {
    background-position:
      $ant-size top,
      $ant-size bottom,
      left $ant-size,
      right $ant-size;
  }
}

/** Preload some fonts for grid metric calculations, loaded by FontBootstrap */
/* stylelint-disable */
.fira-sans-regular {
  font-family: 'Fira Sans';
  font-weight: 400;
}

.fira-sans-semibold {
  font-family: 'Fira Sans';
  font-weight: 600;
}

.fira-mono {
  font-family: 'Fira Mono';
  font-weight: 400;
}
/* stylelint-enable */