@use "sass:meta";
// bs variables
$grid-gutter-width: 1.5rem;
$border-radius: .425rem;
$btn-border-width: var(--bs-border-width);

$form-file-button-bg: var(--bs-body-bg);
$form-file-button-hover-bg: var(--pngx-bg-alt);

@import "node_modules/bootstrap/dist/css/bootstrap.css";
@include meta.load-css("theme");
@import "@ng-select/ng-select/themes/default.theme.css";
@include meta.load-css("print");

// re-created bootstrap styles
.mt-n2 {
  margin-top: -0.5rem;
}
.me-n2 {
  margin-right: -0.5rem;
}
.me-n3 {
  margin-right: -1rem;
}
.mb-n2 {
  margin-bottom: -0.5rem;
}
.ms-n1 {
  margin-left: -0.25rem;
}
.ms-n2 {
  margin-left: -0.5rem;
}
.my-n2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 2400px
);

:root {
  --bs-border-radius: #{$border-radius};

  @each $name, $value in $grid-breakpoints {
    --bs-breakpoint-#{$name}: #{$value};
  }
}

// Paperless-ngx styles
body {
  --pngx-body-font-size: 0.875rem;
  --pngx-sidebar-expanded-width: clamp(15rem, 16.66666667vw, 20rem);
  font-size: var(--pngx-body-font-size);
  height: 100vh;
  letter-spacing: -0.005em;
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card,
.dropdown-menu,
.modal-content,
.popover {
  --bs-card-border-color: color-mix(in srgb, var(--bs-border-color) 72%, transparent);
  border-radius: .55rem;
}

.card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .035);
}

.btn {
  --bs-border-radius-sm: #{$border-radius};
  font-weight: 500;
}

.pagination, .input-group {
  --bs-border-radius-sm: #{$border-radius};
}

@media(min-width: 768px) {
  .col-slim {
    padding-left: calc(56px + $grid-gutter-width) !important;
  }

  .col-sidebar-expanded {
    flex: 0 0 auto;
    width: calc(100% - var(--pngx-sidebar-expanded-width));
  }

  .offset-sidebar-expanded {
    margin-left: var(--pngx-sidebar-expanded-width);
  }
}

svg.logo {
  .leaf {
    fill: var(--bs-primary) !important;
  }
  .text {
    fill: var(--bs-body-color) !important;
  }
}

.navbar.bg-primary {
  --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
  --bs-primary-rgb: var(--bs-primary);
}

.border {
  border-color: var(--bs-border-color) !important;
}

.border-end {
  border-right: 1px solid var(--bs-border-color) !important;
}

.border-start {
  border-left: 1px solid var(--bs-border-color) !important;
}
