// https://mantine.dev/styles/sass/#usage-with-vite
@use "sass:math";

:root[data-mantine-color-scheme="light"] {
  --mantine-color-body: #f8f9fa;
  --mantine-color-text: #000000;
}

:root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0f1115;
  --mantine-color-text: #ffffff;
}

$mantine-breakpoint-xs: "40em";
$mantine-breakpoint-sm: "54em";
$mantine-breakpoint-md: "68em";
$mantine-breakpoint-lg: "82em";
$mantine-breakpoint-xl: "96em";
$mantine-breakpoint-xl2: "110em";
$mantine-breakpoint-xl3: "126em";
$mantine-breakpoint-xl4: "142em";

// Prevent auto zooming on mobile
@media screen and (max-width: 768px) {
  .mantine-Input-input,
  .mantine-Button-root {
    font-size: 16px !important;
  }
}

@function rem($value) {
  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}

@mixin light {
  [data-mantine-color-scheme="light"] & {
    @content;
  }
}

@mixin dark {
  [data-mantine-color-scheme="dark"] & {
    @content;
  }
}

@mixin hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }

  @media (hover: none) {
    &:active {
      @content;
    }
  }
}

@mixin smaller-than($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

@mixin larger-than($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Add direction mixins if you need rtl support
@mixin rtl {
  [dir="rtl"] & {
    @content;
  }
}

@mixin ltr {
  [dir="ltr"] & {
    @content;
  }
}
