common.scss

@use "@angular/material" as mat;
@use "variables" as v;
@use "dialogs";
@import "../fonts/icons.css";
@import "font-awesome/css/font-awesome.css";
@import "~maplibre-gl/dist/maplibre-gl.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

$app-primary: mat.m2-define-palette(mat.$m2-green-palette, 600);
$app-accent: mat.m2-define-palette(mat.$m2-yellow-palette);
$app-warm: mat.m2-define-palette(mat.$m2-red-palette);
$app-theme: mat.m2-define-light-theme((
 color: (
   primary: $app-primary,
   accent: $app-accent,
   warn: $app-warm,
 ),
 typography: mat.m2-define-typography-config(),
 density: 0,
));
$app-background: map-get($app-theme, background);
@include mat.core();
@include mat.all-component-themes($app-theme);


.mat-mdc-snack-bar-container {
    &.success-snackbar {
        --mdc-snackbar-container-color: #32CD6D;
    }
    &.warn-snackbar {
        --mdc-snackbar-container-color: #{mat.m2-get-color-from-palette($app-accent)};
        --mdc-snackbar-supporting-text-color: ##000;
    }
    &.error-snackbar {
        --mdc-snackbar-container-color: #{mat.m2-get-color-from-palette($app-warm)};
    }
    &.confirm-snackbar {
        --mat-snack-bar-button-color: var(--mdc-snackbar-supporting-text-color);
    }
  }


/* added direction to fix issue with scroll bar and legend maps */
.sidebar-wrapper {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    bottom: 0;
    left: 0;
    width: v.$app-sidebar-width;
    line-height: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    color: black;
    direction: ltr;
    background: mat.m2-get-color-from-palette($app-background, card);
    z-index: v.$app-left-z-index + 5;
}


@media (width <= 550px) {
    .sidebar-wrapper {
        width: 100vw;
        box-sizing: border-box;
    }
}

html {
    height: 100%;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
    overflow: hidden;
}

.side-control {
    position: relative;
    padding: 2px;
    clear: both;
    background-color: white;
    margin: 0 !important;
    border: 2px solid rgba(0,0,0,.2);

    & button, a {
        min-width: unset !important;
        padding: 0 !important;
        display: block;
        width: v.$app-button-size;
        height: v.$app-button-size;

        & i {
            vertical-align: middle !important;
        }
    }
}

.input-wrapper-spacer {
    height: 0;
    margin-bottom: 1rem;
}

@media (width <= 550px) {
    .route-statistics-control-container {
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }
}

.active {
    outline: 2px solid #32CD6D !important;
}
// photoswipe, used for placing overlay at the right z-index
overlay.overlay-shown {
    z-index: 2000 !important;
}
.cdk-overlay-container {
    z-index: 1500 !important;
}
// end photoswipe


.stack-icon-top {
    top: -2px;
}

.stack-icon-small {
    font-size: 0.75em !important;
}

.stack-icon-large {
    font-size: 1.25em !important;
}

.fa.mat-icon {
    width: 24px;
    text-align: center;
    margin: 0 !important;
}

.min-w-unset {
    min-width: unset !important;
}

.h-unset {
    height: unset !important;
}

.control-container {
    display: table;
}

.control-container-item {
    display: table-cell;
    vertical-align: middle;
    height: v.$app-button-size;
}

.control-container-item.gutters {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap
}

.chrome-wordwrap-fix {
    word-wrap: break-word;
}

.img-responsive {
    max-width: 100%;
}

.img-responsive-full {
    width: 100%;
    object-fit: contain;
}

.img-center {
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    max-height: 100%;
}

.img-container-small {
    position: relative;
    width: 100%;
    height: 200px;
}

.break-lines {
    white-space: pre-line;
}

.has-extra-data {
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    z-index: 1;
}

[dir=rtl] .has-extra-data {
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    border-radius: 50%;
    z-index: 1;
}

/* Progressbar override */
.ng-bar {
    background-color: #32CD6D !important;
}

.ng-spinner-icon {
    border-top-color: #32CD6D !important;
    border-left-color: #32CD6D !important;
}

.ng-meteor {
    box-shadow: 0 0 10px #32CD6D, 0 0 5px #32CD6D !important
}
/* Progressbar override */

@media print {
    .mat-mdc-tooltip,
    .side-control {
        display: none !important;
    }
}