/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

@use "../mixins/focus-ring" as *;
@use "../mixins/button" as *;

// TODO: Remove focus tokens once global tokens for dark themes are implemented
$hds-interactive-dark-theme-color-focus-action-internal: #bcc7fd;
$hds-interactive-dark-theme-color-focus-action-external: #0d69f2;
$hds-interactive-dark-theme-focus-ring-action-box-shadow:
  inset 0 0 0 1px #{$hds-interactive-dark-theme-color-focus-action-internal},
  0 0 0 3px #{$hds-interactive-dark-theme-color-focus-action-external};

// Used to apply dark theme to interactive elements such as Button & Dropdown
@mixin hds-interactive-dark-theme($add-visible-border: true, $is-within-app-side-nav: false) {
  // Override token used in focus ring mixin
  --token-focus-ring-action-box-shadow: #{$hds-interactive-dark-theme-focus-ring-action-box-shadow};

  // Default:
  border: 1px solid transparent;
  cursor: pointer;

  @if ($add-visible-border) {
    border-color: var(--token-color-palette-neutral-500);
  }

  @if $is-within-app-side-nav {
    // sidenav specific dark theme tokens
    color: var(--token-app-side-nav-color-foreground-strong);
    background-color: transparent; // test
    border-radius: var(--token-app-side-nav-body-list-item-border-radius);
  } @else {
    // general dark theme tokens
    color: var(--token-color-foreground-high-contrast);
    background-color: var(--token-color-palette-neutral-700);
    border-radius: $hds-button-border-radius; // We don't have a button border-radius token so we use the button mixin sass variable
  }

  // Hover:
  &:hover,
  &.mock-hover {
    @if ($add-visible-border) {
      border-color: var(--token-color-palette-neutral-500);
    }

    @if $is-within-app-side-nav {
      // sidenav specific dark theme tokens
      color: var(--token-app-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
      background-color: var(--token-app-side-nav-color-surface-interactive-hover);
    } @else {
      // general dark theme tokens
      color: var(--token-color-foreground-high-contrast); // to avoid overrides by specificity (eg. `a:hover`)
      background-color: var(--token-color-palette-neutral-600);
    }
  }

  // Focus:
  &:focus,
  &.mock-focus {
    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);

    // See: https://sass-lang.com/d/mixed-decls
    & {
      color: var(--token-color-foreground-high-contrast);
      background-color: var(--token-color-palette-neutral-700);

      @if ($add-visible-border) {
        border-color: $hds-interactive-dark-theme-color-focus-action-internal;
      }
    }

    // focus ring:
    &::before {
      color: var(--token-color-foreground-high-contrast);
      border: none;
    }
  }

  // override style removing the focus style
  &:focus:focus:not(:focus-visible)::before {
    box-shadow: $hds-interactive-dark-theme-focus-ring-action-box-shadow;
  }

  // Active:
  &:active,
  &.mock-active {
    @if $is-within-app-side-nav {
      // sidenav specific dark theme tokens
      color: var(--token-app-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
      background-color: var(--token-app-side-nav-color-surface-interactive-active);
    } @else {
      // general dark theme tokens
      color: var(--token-color-foreground-high-contrast); // to avoid overrides by specificity (eg. `a:hover`)
      background-color: var(--token-color-palette-neutral-500);
    }

    @if ($add-visible-border) {
      border-color: var(--token-color-palette-neutral-400);
    }
  }
}

@mixin hds-interactive-dark-theme-state-disabled() {
  color: var(--token-color-foreground-disabled);
  background-color: var(--token-color-palette-neutral-600);
  border-color: var(--token-color-palette-neutral-500);
}