/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */

//-----------------------------------------------
// Core button styles for both light+dark themes
// (Color-related styles in separate block below)
//-----------------------------------------------
.xh-app,
.xh-app.xh-dark,
.xh-app.xh-dark.bp6-dark {
  .xh-button.bp6-button {
    border-radius: var(--xh-button-border-radius-px);
    font-family: var(--xh-button-font-family);
    font-size: var(--xh-button-font-size-px);
    white-space: nowrap;

    // Shaded/filled-in (non-minimal) mode.
    &.xh-button--standard {
      padding: var(--xh-pad-half-px) var(--xh-pad-px);
    }

    // Minimal (Hoist default) and outlined mode.
    &.xh-button--minimal,
    &.xh-button--outlined {
      padding: var(--xh-pad-half-px) var(--xh-pad-half-px);
    }

    &.xh-button--disabled {
      opacity: var(--xh-button-disabled-opacity);
    }

    &.xh-button--autofocus-enabled {
      // Hoist calls FocusStyleManager.onlyShowFocusOnTabs(), which by default hides focus indicators
      // unless a component has been tabbed into via keyboard. Override here to always show a focus
      // indicator for an autoFocus button so it's clear that it has focus.
      &:focus {
        outline: var(--xh-focus-outline) !important;
        outline-offset: var(--xh-focus-outline-offset-px) !important;
      }
    }
  }

  //------------------------
  // Button group (input)
  //------------------------
  .xh-button-group {
    .xh-button.bp6-button {
      &.xh-button--minimal,
      &.xh-button--outlined {
        // Ensures outlined buttons in button-groups appear seamlessly adjacent to each other in dark mode.
        margin-right: 0;
        padding: var(--xh-pad-half-px) var(--xh-pad-px);
      }

      // Minimal has no borders - radius is made visible by background shading when hovered or
      // pressed, and looks more natural without any radius.
      &.xh-button--minimal {
        border-radius: 0;
      }

      &.xh-button--enabled {
        // Hoist calls FocusStyleManager.onlyShowFocusOnTabs(), which by default hides focus indicators
        // unless a component has been tabbed into via keyboard. Override here to always show a focus
        // indicator for a programmatically focused button so it's clear that it has focus.
        &:focus {
          outline: var(--xh-focus-outline) !important;
          outline-offset: var(--xh-focus-outline-offset-px) !important;
        }
      }
    }

    // Horizontal mode only styles
    &:not(.bp6-vertical) {
      .xh-button.bp6-button {
        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
        // they seamlessly combine their inner borders.
        border-radius: 0;
        &.xh-button--standard,
        &.xh-button--outlined {
          &:first-child {
            border-radius: var(--xh-button-border-radius-px) 0 0 var(--xh-button-border-radius-px);
          }

          &:last-child {
            border-radius: 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0;
          }
        }

        // Outlined buttons should avoid doubled-up inner borders.
        &.xh-button--outlined:not(:last-child) {
          border-right: none;
        }
      }
    }

    // Vertical mode only styles
    &.bp6-vertical {
      .xh-button.bp6-button {
        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
        // they seamlessly combine their inner borders.
        border-radius: 0;
        &.xh-button--standard,
        &.xh-button--outlined {
          &:first-child {
            border-radius: var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0 0;
          }

          &:last-child {
            border-radius: 0 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px);
          }
        }

        // Outlined buttons should avoid doubled-up inner borders.
        &.xh-button--outlined:not(:last-child) {
          border-bottom: none;
        }
      }
    }
  }
}

//---------------------------
// Default/light theme colors
//---------------------------
.xh-app {
  .xh-button.bp6-button {
    // Shaded/filled-in (non-minimal) mode.
    &.xh-button--standard {
      &.xh-button--active {
        box-shadow: var(--xh-button-active-box-shadow);
      }

      &.xh-button--intent-none {
        color: var(--xh-button-text-color);
        background-color: var(--xh-button-bg-lightest);

        &.xh-button--active {
          background-color: var(--xh-button-active-bg);
          color: var(--xh-button-active-text-color);
        }
        // BG styles for :hover and :active limited to enabled buttons only - prevent misleading
        // highlight on hover for a disabled button. Note that :active pseudo-selector here is
        // triggered while button is being "held down" by user.
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-button-bg-lighter);
          }
          &:active {
            background-color: var(--xh-button-bg-darkest);
          }
        }
      }

      &.xh-button--intent-primary {
        color: white;
        background-color: var(--xh-intent-primary);
        &.xh-button--active {
          background-color: var(--xh-intent-primary-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-primary-darker);
          }
          &:active {
            background-color: var(--xh-intent-primary-darkest);
          }
        }
      }

      &.xh-button--intent-success {
        color: white;
        background-color: var(--xh-intent-success);
        &.xh-button--active {
          background-color: var(--xh-intent-success-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-success-darker);
          }
          &:active {
            background-color: var(--xh-intent-success-darkest);
          }
        }
      }

      // Extra color:white rules added to warning to overcome (mysteriously) more specific BP styles.
      // Without these, warning buttons get incorrect dark text in light mode when active or hovered.
      &.xh-button--intent-warning {
        color: white;
        background-color: var(--xh-intent-warning);
        &.xh-button--active {
          color: white;
          background-color: var(--xh-intent-warning-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            color: white;
            background-color: var(--xh-intent-warning-darker);
          }
          &:active {
            background-color: var(--xh-intent-warning-darkest);
          }
        }
      }

      &.xh-button--intent-danger {
        color: white;
        background-color: var(--xh-intent-danger);
        &.xh-button--active {
          background-color: var(--xh-intent-danger-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-danger-darker);
          }
          &:active {
            background-color: var(--xh-intent-danger-darkest);
          }
        }
      }
    }

    // Minimal (Hoist default) and outlined mode.
    &.xh-button--minimal,
    &.xh-button--outlined {
      &.xh-button--intent-none {
        color: var(--xh-button-text-color);
        background-color: transparent;
        border-color: var(--xh-button-border-color);
        &.xh-button--active {
          background-color: var(--xh-button-active-bg);
          color: var(--xh-button-active-text-color);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-button-bg-darker);
          }
          &:active {
            background-color: var(--xh-button-bg-darkest);
          }
        }
      }

      &.xh-button--intent-primary {
        color: var(--xh-intent-primary-darker);
        background-color: transparent;
        border-color: var(--xh-intent-primary);
        &.xh-button--active {
          background-color: var(--xh-intent-primary-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-primary-trans1);
          }
          &:active {
            background-color: var(--xh-intent-primary-trans2);
          }
        }
      }

      &.xh-button--intent-success {
        color: var(--xh-intent-success-darker);
        background-color: transparent;
        border-color: var(--xh-intent-success);
        &.xh-button--active {
          background-color: var(--xh-intent-success-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-success-trans1);
          }
          &:active {
            background-color: var(--xh-intent-success-trans2);
          }
        }
      }

      &.xh-button--intent-warning {
        color: var(--xh-intent-warning-darker);
        background-color: transparent;
        border-color: var(--xh-intent-warning);
        &.xh-button--active {
          background-color: var(--xh-intent-warning-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-warning-trans1);
          }
          &:active {
            background-color: var(--xh-intent-warning-trans2);
          }
        }
      }

      &.xh-button--intent-danger {
        color: var(--xh-intent-danger-darker);
        background-color: transparent;
        border-color: var(--xh-intent-danger);
        &.xh-button--active {
          background-color: var(--xh-intent-danger-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-danger-trans1);
          }
          &:active {
            background-color: var(--xh-intent-danger-trans2);
          }
        }
      }
    }
  }
}

//---------------------------
// Dark theme colors
//---------------------------
.xh-app.xh-dark,
.xh-app.xh-dark.bp6-dark {
  .xh-button.bp6-button {
    // Dark - shaded/filled-in (non-minimal) mode.
    &.xh-button--standard {
      &.xh-button--intent-none {
        color: var(--xh-button-text-color);
        background-color: var(--xh-button-bg);
        &.xh-button--active {
          background-color: var(--xh-button-active-bg);
          color: var(--xh-button-active-text-color);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-button-bg-darker);
          }
          &:active {
            background-color: var(--xh-button-bg-darkest);
          }
        }
      }

      &.xh-button--intent-primary {
        color: white;
        background-color: var(--xh-intent-primary);
        &.xh-button--active {
          background-color: var(--xh-intent-primary-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-primary-darker);
          }
          &:active {
            background-color: var(--xh-intent-primary-darkest);
          }
        }
      }

      &.xh-button--intent-success {
        color: white;
        background-color: var(--xh-intent-success);
        &.xh-button--active {
          background-color: var(--xh-intent-success-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-success-darker);
          }
          &:active {
            background-color: var(--xh-intent-success-darkest);
          }
        }
      }

      &.xh-button--intent-warning {
        color: white;
        background-color: var(--xh-intent-warning);
        &.xh-button--active {
          background-color: var(--xh-intent-warning-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-warning-darker);
          }
          &:active {
            background-color: var(--xh-intent-warning-darkest);
          }
        }
      }

      &.xh-button--intent-danger {
        color: white;
        background-color: var(--xh-intent-danger);
        &.xh-button--active {
          background-color: var(--xh-intent-danger-darkest);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-danger-darker);
          }
          &:active {
            background-color: var(--xh-intent-danger-darkest);
          }
        }
      }
    }

    // Dark - minimal (Hoist default) and outlined mode.
    &.xh-button--minimal,
    &.xh-button--outlined {
      &.xh-button--intent-none {
        color: var(--xh-button-text-color);
        background-color: transparent;
        border-color: var(--xh-button-border-color);
        &.xh-button--active {
          background-color: var(--xh-button-active-bg);
          color: var(--xh-button-active-text-color);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-button-bg-darker);
          }
          &:active {
            background-color: var(--xh-button-bg-lighter);
          }
        }
      }

      &.xh-button--intent-primary {
        color: var(--xh-intent-primary-lighter);
        background-color: transparent;
        border-color: var(--xh-intent-primary-lighter);
        &.xh-button--active {
          background-color: var(--xh-intent-primary-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-primary-trans1);
          }
          &:active {
            background-color: var(--xh-intent-primary-trans2);
          }
        }
      }

      &.xh-button--intent-success {
        color: var(--xh-intent-success-lighter);
        background-color: transparent;
        border-color: var(--xh-intent-success-lighter);
        &.xh-button--active {
          background-color: var(--xh-intent-success-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-success-trans1);
          }
          &:active {
            background-color: var(--xh-intent-success-trans2);
          }
        }
      }

      &.xh-button--intent-warning {
        color: var(--xh-intent-warning-lighter);
        background-color: transparent;
        border-color: var(--xh-intent-warning-lighter);
        &.xh-button--active {
          background-color: var(--xh-intent-warning-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-warning-trans1);
          }
          &:active {
            background-color: var(--xh-intent-warning-trans2);
          }
        }
      }

      &.xh-button--intent-danger {
        color: var(--xh-intent-danger-lighter);
        background-color: transparent;
        border-color: var(--xh-intent-danger-lighter);
        &.xh-button--active {
          background-color: var(--xh-intent-danger-trans2);
        }
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-danger-trans1);
          }
          &:active {
            background-color: var(--xh-intent-danger-trans2);
          }
        }
      }
    }
  }
}

//------------------------
// Header "tool" buttons in panels and docks
// Adjustment needed only in light theme.
//------------------------
*:not(.xh-dark) {
  .xh-dock-view__header,
  .xh-panel-header__items,
  .xh-panel-header--right,
  .xh-panel-header--left {
    .xh-button.bp6-button.xh-button--minimal {
      &.xh-button--intent-none {
        &.xh-button--enabled {
          &:hover:not(:active):not(.xh-button--active) {
            background-color: var(--xh-intent-neutral-trans1);
          }
          &:active {
            background-color: var(--xh-intent-neutral-trans2);
          }
        }
      }
    }
  }
}