@import '@blueprintjs/core/src/common/react-transition';

//------------------------
// Tabs
//------------------------
.bp6-tab-panel > div {
  margin: 0 !important; // TODO - investigate this....
}

.bp6-tab > svg:first-child {
  margin-right: var(--xh-pad-half-px);
}

// Vertical tab lists fill their width
.bp6-tabs.bp6-vertical .bp6-tab-list {
  flex: 1;
}

//------------------------
// Dialogs, Popovers, Masking
//------------------------
.bp6-dialog {
  padding-bottom: 0;
  border-radius: var(--xh-border-radius-px);
  border: var(--xh-popup-border-width-px) solid var(--xh-popup-border-color);

  .bp6-dialog-header {
    color: var(--xh-popup-title-text-color);
    background-color: var(--xh-popup-title-bg);
    font-family: var(--xh-popup-title-font-family);
    font-size: var(--xh-popup-title-font-size-px);
    padding-left: var(--xh-pad-px);
    border-top-right-radius: var(--xh-border-radius-px);
    border-top-left-radius: var(--xh-border-radius-px);

    .bp6-heading,
    .bp6-icon {
      color: var(--xh-popup-title-text-color);
    }

    > svg:first-child {
      margin-right: var(--xh-pad-px);
    }
  }

  .bp6-dialog-body {
    margin: 0;
    padding: var(--xh-pad-double-px);
    background: var(--xh-popup-bg);

    // See https://github.com/xh/hoist-react/issues/862 for why this is necessary. Note need for
    // datepicker workaround below - indicates that this might be a problematic solution in general
    // to the original issue, but after a few years that's been the only reported issue, so...
    overflow-wrap: break-word;

    // Ensure that date numbers in the datepicker do not wrap if the datePicker portal is rendered
    // inside a dialogBody - e.g. `dateEditor` in a grid in a dialog. See comment on #862.
    .bp6-datepicker {
      overflow-wrap: normal;
    }
  }
}

// Customized here for backdrops behind dialogs.
// Note that masks use their own CSS var, set in Mask.scss.
.bp6-overlay {
  transition: none;

  &-backdrop:not(.bp6-popover-backdrop) {
    background-color: var(--xh-backdrop-bg);
  }
}

// Blueprint popover borders use hardcoded SASS color variables with no CSS custom property support.
// Override the outset 1px border-shadow layer in each theme to use Hoist's `--xh-popup-border-color`,
// keeping remaining shadow layers (inset highlights, drop shadows) identical to BP defaults.
.bp6-popover {
  box-shadow:
    0 0 0 1px var(--xh-popup-border-color),
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);

  // Arrow border matches the popover border; arrow fill matches the popover background.
  .bp6-popover-arrow-border {
    fill: var(--xh-popup-border-color);
    fill-opacity: 1;
  }

  .bp6-popover-arrow-fill {
    fill: var(--xh-popup-bg, var(--xh-bg));
  }

  &.bp6-dark,
  .bp6-dark & {
    box-shadow:
      0 0 0 1px var(--xh-popup-border-color),
      0 0 0 1px inset rgba(255, 255, 255, 0.2),
      0 20px 25px -5px rgba(0, 0, 0, 0.3),
      0 0 0.5px 0 inset rgba(255, 255, 255, 0.3),
      0 0.5px 0 0 inset rgba(255, 255, 255, 0.08),
      0 10px 30px -5px rgba(0, 0, 0, 0.3);
  }
}

// On Popover and Tooltip components, squelch scale & opacity transition - unlike Dialog with its `transitionName` prop,
// Popover, and consequently Tooltip, do not appear to provide a way to turn off
// their transitions without also losing the (often desirable) arrow pointing to their targets.
// These rules override the scale and opacity starting values of enter and exit classes by setting them to
// their final 'end of transition' values, which has the effect of preventing/short circuiting transitions.
// BlueprintJs' own Popover.minimal uses this same approach to disable its transitions.
// (it appears from testing that overriding these rules with any value will squelch the transition, but
// we might as well use the final values to be explicit.)
.bp6-popover-transition-container {
  &.bp6-popover-enter,
  &.bp6-popover-appear {
    opacity: 1;
  }

  &.bp6-popover-exit {
    opacity: 0;
  }

  &.bp6-popover-enter,
  &.bp6-popover-appear {
    > .bp6-popover {
      transform: scale(1);
    }
  }

  &.bp6-popover-exit-active,
  &.bp6-popover-exit {
    > .bp6-popover {
      transform: scale(0);
    }
  }
}

//------------------------
// Menus
//------------------------
.bp6-dark .bp6-menu,
.bp6-menu {
  background-color: var(--xh-menu-bg);
  border: var(--xh-menu-border);
  color: var(--xh-menu-item-text-color);

  // Constrain menu height to the viewport, for menus with more items than will fit vertically.
  // Note that this is not perfect - menus are shown relative to their target, and if a menu is
  // in the middle of the page and forced to render above/below the target, it can still clip.
  // The 100px offset is designed to account for menus shown from app/tab-level top/bottom toolbars.
  max-height: calc(100vh - 100px);
  overflow-y: auto;

  .bp6-menu-item {
    // Default alignment of flex-start leaves Hoist icons shifted up - could target
    // more specifically if this is a problem in any other contexts.
    align-items: center;
    color: var(--xh-menu-item-text-color);
    padding: 5px 10px;

    .bp6-menu-item-icon {
      color: inherit;
    }

    &:hover {
      background-color: var(--xh-menu-item-highlight-bg);
      border-radius: 0;
    }

    &.bp6-intent-primary {
      color: var(--xh-intent-primary);
    }

    &.bp6-intent-success {
      color: var(--xh-intent-success);
    }

    &.bp6-intent-warning {
      color: var(--xh-intent-warning);
    }

    &.bp6-intent-danger {
      color: var(--xh-intent-danger);
    }

    .xh-dark & {
      &.bp6-intent-primary {
        color: var(--xh-intent-primary-lighter);
      }

      &.bp6-intent-success {
        color: var(--xh-intent-success-lighter);
      }

      &.bp6-intent-warning {
        color: var(--xh-intent-warning-lighter);
      }

      &.bp6-intent-danger {
        color: var(--xh-intent-danger-lighter);
      }
    }
  }

  .bp6-submenu {
    padding: 0;
  }
}

.bp6-dark .bp6-menu-divider {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

//------------------------
// Buttons
//------------------------
// See desktop/cmp/button/Button.scss for button styles.
// Rule below applies only to buttons within BP inputs to disable default hover background-color
// (which looks weird) and instead tweak the icon color to indicate it's active.
.xh-app .xh-input .bp6-input-group .xh-button {
  &.xh-button--minimal,
  &.xh-button--outlined {
    &.xh-button--enabled {
      &:hover {
        background-color: unset !important;

        svg {
          color: var(--xh-button-text-color) !important;
        }
      }
    }
  }
}

//------------------------
// Tooltips
//------------------------
.bp6-tooltip {
  &.bp6-intent-primary {
    .bp6-popover-content {
      background-color: var(--xh-intent-primary);
    }

    .bp6-popover-arrow-fill {
      fill: var(--xh-intent-primary);
    }
  }

  &.bp6-intent-danger {
    .bp6-popover-content {
      background-color: var(--xh-intent-danger);
    }

    .bp6-popover-arrow-fill {
      fill: var(--xh-intent-danger);
    }
  }

  &.bp6-intent-success {
    .bp6-popover-content {
      background-color: var(--xh-intent-success);
    }

    .bp6-popover-arrow-fill {
      fill: var(--xh-intent-success);
    }
  }

  &.bp6-intent-warning {
    .bp6-popover-content {
      background-color: var(--xh-intent-warning);
    }

    .bp6-popover-arrow-fill {
      fill: var(--xh-intent-warning);
    }
  }
}

//------------------------
// Forms + Inputs
//------------------------
.bp6-input,
.bp6-dark .bp6-input,
textarea.bp6-input,
.bp6-dark textarea.bp6-input,
.bp6-input-ghost {
  color: var(--xh-input-text-color);
  background: var(--xh-input-bg);
  font-size: var(--xh-font-size);

  &::placeholder {
    color: var(--xh-input-placeholder-text-color);
    opacity: 1;
  }

  // Use Hoist theme vars for disabled input styles.
  &.bp6-disabled,
  &:disabled {
    background-color: var(--xh-input-disabled-bg);
    color: var(--xh-input-disabled-text-color);
  }
}

// Expose CSS var for box-shadow tweaking
.bp6-input:not(.bp6-active):not(:focus) {
  box-shadow: var(--xh-form-field-box-shadow);
}

.bp6-control,
.bp6-dark .bp6-control {
  input:focus ~ .bp6-control-indicator {
    outline: var(--xh-form-field-focused-border-color) solid 1px !important;
    outline-offset: 1px;
  }
}

.bp6-slider-handle:focus {
  outline: unset; // override browser default styles
  box-shadow: var(--xh-slider-handle-focused-box-shadow);
}

.bp6-input:focus,
.bp6-dark .bp6-input:focus,
.bp6-dark textarea.bp6-input:focus {
  box-shadow: var(--xh-form-field-focused-box-shadow);
}

// Override Blueprint textarea and switch input dark theme
.bp6-dark textarea.bp6-input {
  box-shadow: var(--xh-form-field-box-shadow);
}

.bp6-dark .bp6-control.bp6-switch input ~ .bp6-control-indicator {
  box-shadow: var(--xh-form-field-box-shadow) !important;
}

.bp6-dark .bp6-control.bp6-switch:hover input ~ .bp6-control-indicator {
  background-color: #202b33;
}

/* Apply blueprint styling to non-blueprint icons within input groups */
.bp6-input-group {
  .xh-icon {
    position: absolute;
    top: 0;
    line-height: 1;
    font-size: var(--xh-font-size-large-px);
    font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    z-index: 1;
    margin: 7px;
    color: var(--xh-text-color-muted);
  }

  // Support direct use of a Hoist Icon as input `rightElement` prop - w/o the below, the icon SVG
  // will not be measured (clientWidth == 0) and the input's internal layout won't account for it.
  .bp6-input-action > .xh-icon {
    position: relative;
    display: block;
  }

  .bp6-button-group {
    margin-right: 3px;

    .bp6-button {
      margin-right: 0;
      margin-left: 0;
    }

    .xh-icon {
      margin-top: 4px;
    }
  }
}

/* Apply blueprint's z-index of 16 for icons within a control group */
.bp6-control-group .bp6-input-group svg:not(.bp6-icon) {
  z-index: 16;
}

// Controls ship with default bottom and (inline) right margins.
// We zero those out here so padding can be re-applied at HoistInput or FormField layer.
// Hoist theme text-color applied to elements not styled with a more specific selector.
.bp6-control {
  color: var(--xh-text-color);
  margin-bottom: 0;

  &.bp6-inline {
    margin-inline-end: 0;
  }
}

//------------------------
// Misc
//------------------------
.bp6-hotkey-column {
  padding: var(--xh-pad-double-px);

  .bp6-heading {
    font-weight: normal;
    margin-top: 0;
  }
}