@import "../../less/Common/Constants";
:root {
  // Light theme variables
  --colorNeutralBackground1: @BaseLight;
  --colorNeutralBackground2: @BaseLow;
  --colorNeutralBackground3: @BaseMediumLow;
  --colorNeutralForeground1: @BaseHigh;
  --colorNeutralForeground2: @BaseMediumHigh;
  --colorNeutralForeground3: @BaseMedium;
  --colorNeutralForeground4: @BaseLow;
  --colorNeutralStroke1: @BaseMedium;
  --colorCompoundBrandStroke1: @SelectionColor;
  --colorBrandForeground1: @LinkColor;
  --colorPaletteRedForeground1: @ErrorColor;
  --colorSuccessGreen: #107c10;
  --overlayBackground: rgba(0, 0, 0, 0.4);
  --colorBrandBackground: @SelectionColor;
  --colorBrandBackgroundHover: @AccentMediumHigh;
  --colorBrandBackgroundPressed: @AccentMedium;
  --colorNeutralForegroundOnBrand: @BaseLight;
}

// Dark theme variables
body.isDarkMode {
  --colorNeutralBackground1: #1e1e1e;
  --colorNeutralBackground2: #2d2d2d;
  --colorNeutralBackground3: #404040;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d2d2d2;
  --colorNeutralForeground3: #a0a0a0;
  --colorNeutralForeground4: #6e6e6e;
  --colorNeutralStroke1: #484848;
  --colorCompoundBrandStroke1: #4db6e8;
  --colorBrandForeground1: #4db6e8;
  --colorPaletteRedForeground1: #f25d5d;
  --colorSuccessGreen: #107c10;
  --overlayBackground: rgba(0, 0, 0, 0.4);
  --colorBrandBackground: #0078d4;
  --colorBrandBackgroundHover: #106ebe;
  --colorBrandBackgroundPressed: #005a9e;
  --colorNeutralForegroundOnBrand: #ffffff;
}

// Theme Mixins
.theme-background() {
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}

.theme-surface() {
  background-color: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
}

.theme-border() {
  border-color: var(--colorNeutralStroke1);
}

.theme-input() {
  background-color: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
  border: 1px solid var(--colorNeutralStroke1);

  &::placeholder {
    color: var(--colorNeutralForeground3);
  }

  &:focus,
  &:focus-within {
    border-color: var(--colorCompoundBrandStroke1);
    outline: none;
  }
}

:global {
  .ms-TextField {
    .ms-TextField-fieldGroup {
      &:focus-within {
        border-color: var(--colorCompoundBrandStroke1);
      }
    }
  }

  // Checkbox styling for better visibility in dark theme
  .ms-Checkbox {
    .ms-Checkbox-checkbox {
      border-color: var(--colorNeutralStroke1);
      background-color: var(--colorNeutralBackground2);
    }

    &:hover .ms-Checkbox-checkbox {
      border-color: var(--colorNeutralForeground2);
    }

    .ms-Checkbox-label {
      color: var(--colorNeutralForeground1);
    }

    .ms-Checkbox-text {
      color: var(--colorNeutralForeground1);
    }

    &.is-checked {
      .ms-Checkbox-checkbox {
        background-color: var(--colorBrandBackground);
        border-color: var(--colorBrandBackground);
      }

      &:hover .ms-Checkbox-checkbox {
        background-color: var(--colorBrandBackgroundHover);
        border-color: var(--colorBrandBackgroundHover);
      }
    }
  }
}

// Additional dark mode specific adjustments
body.isDarkMode {
  .ms-Checkbox {
    .ms-Checkbox-checkbox {
      border-width: 1px;
      border-color: var(--colorNeutralForeground3);
      background-color: var(--colorNeutralBackground2);
    }

    &:hover .ms-Checkbox-checkbox {
      border-color: var(--colorNeutralForeground2);
      background-color: var(--colorNeutralBackground3);
    }

    &.is-checked .ms-Checkbox-checkbox {
      background-color: var(--colorBrandBackground);
      border-color: var(--colorBrandBackground);
    }
  }
}