@use '@angular/material' as mat;

@include mat.core();

$ng-app-variable-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$ng-app-variable-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$ng-app-variable-warn: mat.m2-define-palette(mat.$m2-red-palette);

$ng-app-variable-theme: mat.m2-define-light-theme(
    (
        color: (
            primary: $ng-app-variable-primary,
            accent: $ng-app-variable-accent,
            warn: $ng-app-variable-warn,
        ),
        typography: mat.m2-define-typography-config(),
        density: -1,
    )
);

@include mat.all-component-themes($ng-app-variable-theme);
@include mat.typography-hierarchy($ng-app-variable-theme);
@include mat.form-field-density(-4);

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
    color: #000;
}

.logo-title {
    font-size: 16px;
}

.dashboard {
    height: 100%;
}

.dashboard__menu {
    --mat-sidenav-container-background-color: rgb(24, 75, 170);
    --mat-sidenav-container-text-color: #fff;
    --mat-sidenav-container-width: 300px;
    --mat-toolbar-container-background-color: var(--mat-sidenav-container-background-color);
    --mat-toolbar-container-text-color: var(--mat-sidenav-container-text-color);
}

.title {
    background: transparent;
    color: #fff;
}

.dashboard__menu a {
    color: #fff;
    text-decoration: none;
}

.dashboard__content.mat-drawer-content {
    padding: 0 100px;
    height: 100%;
    background: whitesmoke;
}

.mat-drawer.mat-drawer-side {
    z-index: 2;
    box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.6);
    border-right: none;
}

.mat-toolbar.simple-toolbar {
    padding: 0;
    position: relative;
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: #0040a7;
}

.red {
    color: red;
}

.spinner.mat-mdc-progress-spinner {
    position: absolute;
    right: 0;
}

.dialog-close {
    float: right;
}

.main__wrap {
    width: 1024px;
    margin: 0 auto;
}

code {
    border: 1px dotted #c3c3c3;
}

.logo {
    width: 30px;
    margin-right: 10px;
    margin-top: -3px;
}

.mat-list-item-content a {
    padding-left: 5px;
}

.mat-divider {
    --mat-divider-color: rgba(241, 232, 232, 0.12);
    width: 80%;
    margin: 0 auto !important;
}

.column-samples {
    display: flex;
    justify-content: space-between;
}

.column {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.column:nth-child(1) {
    margin-right: 45px;
}

pre {
    margin: 0 auto 1em auto;
}

.mat-tab-body {
    padding-top: 5px;
}

.show-simple {
    position: absolute !important;
    right: 0;
    display: flex;
}

.show-simple button {
    margin-left: 10px;
}

.mat-checkbox-flat {
    margin-left: 10px;
    margin-bottom: 3px;
}

.mat-checkbox {
    display: inline-flex;
    margin: 15px 0;
}

hr {
    border-top: 1px solid #e0e0e0;
}

body,
.mat-drawer-container {
    height: 100%;
}

mat-form-field.mat-form-field.mat-form-field-appearance-outline
    > div.mat-form-field-wrapper
    > div.mat-form-field-flex
    > div.mat-form-field-infix {
    padding: 0.4em 0;
}
mat-form-field.mat-form-field.mat-form-field-appearance-outline
    > div.mat-form-field-wrapper
    > div.mat-form-field-flex
    > div.mat-form-field-infix
    > span.mat-form-field-label-wrapper {
    top: -1.5em;
}

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(0.75);
    width: 133.33333%;
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: #e0e0e0;
}
