@import 'variables';
@import 'light-theme';
@import 'dark-theme';

@import '@grapecity/wijmo.styles/wijmo.css';

@import '@angular/cdk/overlay-prebuilt.css';

/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap';

@import 'typography';

@import '@angular/cdk/a11y-prebuilt.css';

:root {
  @include lightTheme;
}

[data-theme='dark'] {
  @include darkTheme;
}

.cdk-overlay-container {
  z-index: $cdk-overlay-zindex;
}

.modal-dialog-confirm {
  z-index: $modal-dialog-zindex !important;
}

.modal-dialog-alert {
  z-index: $modal-dialog-zindex !important;
}

.modal-dialog-confirm-content {
  z-index: $modal-dialog-zindex !important;
}

.modal-dialog-alert-content {
  z-index: $modal-dialog-zindex !important;
}

.modal-dialog-confirm-backdrop {
  z-index: $modal-dialog-zindex-backdrop !important;
}

.modal-dialog-alert-backdrop {
  z-index: $modal-dialog-zindex-backdrop !important;
}

html {
  height: 100%;
}

body {
  height: 100%;
  &[dir='rtl'] {
    direction: rtl !important;
    text-align: right !important;
    .flip-in-rtl {
      transform: scaleX(-1);
    }
  }

  & > div:not([class]) {
    visibility: hidden !important;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: $navyGrayLight;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $navyGrayMed;
    border-radius: 4px;
  }
}

button {
  border: none;
  background: none;
  outline: none;
}

.modal-content {
  background-color: var(--background-primary);
  border-radius: var(--spacing-3x) !important;
  box-shadow: var(--popup-shadow);
  padding: var(--spacing-5x);
}

.text-color {
  color: var(--content-primary) !important;
}

.text-color-muted {
  color: var(--content-tertiary) !important;
}

.text-color-primary {
  color: var(--primary) !important;
}

.text-color-success {
  color: var(--success) !important;
}

.text-color-error {
  color: var(--error) !important;
}

.text-color-warning {
  color: var(--warning) !important;
}

.text-color-alert {
  color: var(--alert) !important;
}

.text-color-info {
  color: var(--information) !important;
}

.typo-heading-1 {
  @include heading1;
}

.typo-heading-2 {
  @include heading2;
}

.typo-heading-3 {
  @include heading3;
}

.typo-heading-4 {
  @include heading4;
}

.typo-heading-5 {
  @include heading5;
}

.typo-heading-6 {
  @include heading6;
}

.typo-body-1 {
  @include body1;
}

.typo-body-2 {
  @include body2;
}

.typo-button-1 {
  @include button1;
}

.typo-button-2 {
  @include button2;
}

.typo-title {
  @include title;
}

.typo-link {
  @include link;
}

.typo-caption {
  @include caption;
}

/* I added this to fix a bug occured after upgrading to angular 15 and ng-bootstrap 14.2 */
.modal-open .modal {
  z-index: 1056;
}

/* added this class to update aside backdrop background and opacity */
.custom-cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.03);
}

body .col,
body .col-1,
body .col-10,
body .col-11,
body .col-12,
body .col-2,
body .col-3,
body .col-4,
body .col-5,
body .col-6,
body .col-7,
body .col-8,
body .col-9,
body .col-auto,
body .col-lg,
body .col-lg-1,
body .col-lg-10,
body .col-lg-11,
body .col-lg-12,
body .col-lg-2,
body .col-lg-3,
body .col-lg-4,
body .col-lg-5,
body .col-lg-6,
body .col-lg-7,
body .col-lg-8,
body .col-lg-9,
body .col-lg-auto,
body .col-md,
body .col-md-1,
body .col-md-10,
body .col-md-11,
body .col-md-12,
body .col-md-2,
body .col-md-3,
body .col-md-4,
body .col-md-5,
body .col-md-6,
body .col-md-7,
body .col-md-8,
body .col-md-9,
body .col-md-auto,
body .col-sm,
body .col-sm-1,
body .col-sm-10,
body .col-sm-11,
body .col-sm-12,
body .col-sm-2,
body .col-sm-3,
body .col-sm-4,
body .col-sm-5,
body .col-sm-6,
body .col-sm-7,
body .col-sm-8,
body .col-sm-9,
body .col-sm-auto,
body .col-xl,
body .col-xl-1,
body .col-xl-10,
body .col-xl-11,
body .col-xl-12,
body .col-xl-2,
body .col-xl-3,
body .col-xl-4,
body .col-xl-5,
body .col-xl-6,
body .col-xl-7,
body .col-xl-8,
body .col-xl-9,
body .col-xl-auto {
  padding-right: calc(var(--side-spacing) / 2) !important;
  padding-left: calc(var(--side-spacing) / 2) !important;
}

body .row {
  margin-right: calc(var(--side-spacing) / -2) !important;
  margin-left: calc(var(--side-spacing) / -2) !important;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: var(--side-spacing) !important;
  padding-left: var(--side-spacing) !important;
}

.dx-data-row .devextream-cell-template {
  padding-block: 0px !important;
  padding-inline: 0px !important;
}