@flywheel-io/vision 0.6.0 → 0.7.0

package/styles.css

@@ -16,77 +16,115 @@
   font-size: 24px;
 }
 
-.mat-h1, .mat-headline, .mat-typography h1 {
+.mat-h1,
+.mat-headline,
+.mat-typography .mat-h1,
+.mat-typography .mat-headline,
+.mat-typography h1 {
   font: 400 24px / 32px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
-.mat-h2, .mat-title, .mat-typography h2 {
+.mat-h2,
+.mat-title,
+.mat-typography .mat-h2,
+.mat-typography .mat-title,
+.mat-typography h2 {
   font: 500 20px / 32px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
-.mat-h3, .mat-subheading-2, .mat-typography h3 {
+.mat-h3,
+.mat-subheading-2,
+.mat-typography .mat-h3,
+.mat-typography .mat-subheading-2,
+.mat-typography h3 {
   font: 400 16px / 28px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
-.mat-h4, .mat-subheading-1, .mat-typography h4 {
+.mat-h4,
+.mat-subheading-1,
+.mat-typography .mat-h4,
+.mat-typography .mat-subheading-1,
+.mat-typography h4 {
   font: 400 15px / 24px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
-.mat-h5, .mat-typography h5 {
+.mat-h5,
+.mat-typography .mat-h5,
+.mat-typography h5 {
   font: 400 calc(14px * 0.83) / 20px Roboto, "Helvetica Neue", sans-serif;
   margin: 0 0 12px;
 }
 
-.mat-h6, .mat-typography h6 {
+.mat-h6,
+.mat-typography .mat-h6,
+.mat-typography h6 {
   font: 400 calc(14px * 0.67) / 20px Roboto, "Helvetica Neue", sans-serif;
   margin: 0 0 12px;
 }
 
-.mat-body-strong, .mat-body-2 {
+.mat-body-strong,
+.mat-body-2,
+.mat-typography .mat-body-strong,
+.mat-typography .mat-body-2 {
   font: 500 14px / 24px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
 }
 
-.mat-body, .mat-body-1, .mat-typography {
+.mat-body,
+.mat-body-1,
+.mat-typography .mat-body,
+.mat-typography .mat-body-1,
+.mat-typography {
   font: 400 14px / 20px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
 }
-.mat-body p, .mat-body-1 p, .mat-typography p {
+.mat-body p,
+.mat-body-1 p,
+.mat-typography .mat-body p,
+.mat-typography .mat-body-1 p,
+.mat-typography p {
   margin: 0 0 12px;
 }
 
-.mat-small, .mat-caption {
+.mat-small,
+.mat-caption,
+.mat-typography .mat-small,
+.mat-typography .mat-caption {
   font: 400 12px / 20px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
 }
 
-.mat-display-4, .mat-typography .mat-display-4 {
+.mat-display-4,
+.mat-typography .mat-display-4 {
   font: 300 112px / 112px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 
-.mat-display-3, .mat-typography .mat-display-3 {
+.mat-display-3,
+.mat-typography .mat-display-3 {
   font: 400 56px / 56px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 
-.mat-display-2, .mat-typography .mat-display-2 {
+.mat-display-2,
+.mat-typography .mat-display-2 {
   font: 400 45px / 48px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 
-.mat-display-1, .mat-typography .mat-display-1 {
+.mat-display-1,
+.mat-typography .mat-display-1 {
   font: 400 34px / 40px Roboto, "Helvetica Neue", sans-serif;
   letter-spacing: normal;
   margin: 0 0 64px;
@@ -262,17 +300,14 @@
 .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
 .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
-  -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.3333333333%;
 }
 .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);
-  -ms-transform: translateY(-1.28124em) scale(0.75);
   width: 133.3333433333%;
 }
 .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);
-  -ms-transform: translateY(-1.28123em) scale(0.75);
   width: 133.3333533333%;
 }
 .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -288,7 +323,7 @@
 
 @media print {
   .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
-.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
+  .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
     transform: translateY(-1.28122em) scale(0.75);
   }
   .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
@@ -584,6 +619,11 @@ input.mat-input-element {
   outline: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
+  left: 0;
+}
+[dir=rtl] .cdk-visually-hidden {
+  left: auto;
+  right: 0;
 }
 
 .cdk-overlay-container, .cdk-global-overlay-wrapper {
@@ -641,8 +681,14 @@ input.mat-input-element {
   background: rgba(0, 0, 0, 0.32);
 }
 
-.cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
   opacity: 0;
+  visibility: visible;
 }
 
 .cdk-overlay-connected-position-bounding-box {
@@ -896,6 +942,10 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   position: relative;
 }
 
+.mat-badge.mat-badge {
+  overflow: visible;
+}
+
 .mat-badge-hidden .mat-badge-content {
   display: none;
 }
@@ -1175,13 +1225,13 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 }
 
-.mat-button-toggle-standalone,
-.mat-button-toggle-group {
+.mat-button-toggle-standalone:not([class*=mat-elevation-z]),
+.mat-button-toggle-group:not([class*=mat-elevation-z]) {
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 
-.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-.mat-button-toggle-group-appearance-standard {
+.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*=mat-elevation-z]),
+.mat-button-toggle-group-appearance-standard:not([class*=mat-elevation-z]) {
   box-shadow: none;
 }
 
@@ -1201,18 +1251,18 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 }
 
 .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
-  border-left: solid 1px rgba(0, 0, 0, 0.12);
+  border-left: solid 1px #e0e0e0;
 }
 
 [dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
   border-left: none;
-  border-right: solid 1px rgba(0, 0, 0, 0.12);
+  border-right: solid 1px #e0e0e0;
 }
 
 .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle + .mat-button-toggle {
   border-left: none;
   border-right: none;
-  border-top: solid 1px rgba(0, 0, 0, 0.12);
+  border-top: solid 1px #e0e0e0;
 }
 
 .mat-button-toggle-checked {
@@ -1236,7 +1286,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 
 .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
 .mat-button-toggle-group-appearance-standard {
-  border: solid 1px rgba(0, 0, 0, 0.12);
+  border: solid 1px #e0e0e0;
 }
 
 .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
@@ -1291,7 +1341,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   border-color: #b0b0b0;
 }
 .mat-checkbox-disabled .mat-checkbox-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0, 0, 0, 0.38);
 }
 
 .mat-checkbox .mat-ripple-element {
@@ -1391,7 +1441,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-calendar-arrow {
-  border-top-color: rgba(0, 0, 0, 0.54);
+  fill: rgba(0, 0, 0, 0.54);
 }
 
 .mat-datepicker-toggle,
@@ -1477,12 +1527,16 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   box-shadow: inset 0 0 0 1px white;
 }
 
-.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: rgba(27, 104, 250, 0.3);
 }
 
+@media (hover: hover) {
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: rgba(27, 104, 250, 0.3);
+  }
+}
 .mat-datepicker-content {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
   background-color: white;
@@ -1521,11 +1575,15 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
   box-shadow: inset 0 0 0 1px white;
 }
-.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: rgba(89, 185, 107, 0.3);
 }
+@media (hover: hover) {
+  .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: rgba(89, 185, 107, 0.3);
+  }
+}
 .mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before {
   background: rgba(217, 83, 75, 0.2);
 }
@@ -1559,11 +1617,15 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
   box-shadow: inset 0 0 0 1px white;
 }
-.mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
   background-color: rgba(217, 83, 75, 0.3);
 }
+@media (hover: hover) {
+  .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: rgba(217, 83, 75, 0.3);
+  }
+}
 
 .mat-datepicker-content-touch {
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
@@ -1826,9 +1888,9 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-list-base .mat-subheader {
   color: rgba(0, 0, 0, 0.54);
 }
-
-.mat-list-item-disabled {
+.mat-list-base .mat-list-item-disabled {
   background-color: #eeeeee;
+  color: rgba(0, 0, 0, 0.38);
 }
 
 .mat-list-option:hover, .mat-list-option:focus,
@@ -2108,39 +2170,37 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-.mat-primary .mat-slider-track-fill,
-.mat-primary .mat-slider-thumb,
-.mat-primary .mat-slider-thumb-label {
+.mat-slider.mat-primary .mat-slider-track-fill,
+.mat-slider.mat-primary .mat-slider-thumb,
+.mat-slider.mat-primary .mat-slider-thumb-label {
   background-color: #1b68fa;
 }
-.mat-primary .mat-slider-thumb-label-text {
+.mat-slider.mat-primary .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-primary .mat-slider-focus-ring {
+.mat-slider.mat-primary .mat-slider-focus-ring {
   background-color: rgba(27, 104, 250, 0.2);
 }
-
-.mat-accent .mat-slider-track-fill,
-.mat-accent .mat-slider-thumb,
-.mat-accent .mat-slider-thumb-label {
+.mat-slider.mat-accent .mat-slider-track-fill,
+.mat-slider.mat-accent .mat-slider-thumb,
+.mat-slider.mat-accent .mat-slider-thumb-label {
   background-color: #59b96b;
 }
-.mat-accent .mat-slider-thumb-label-text {
+.mat-slider.mat-accent .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-accent .mat-slider-focus-ring {
+.mat-slider.mat-accent .mat-slider-focus-ring {
   background-color: rgba(89, 185, 107, 0.2);
 }
-
-.mat-warn .mat-slider-track-fill,
-.mat-warn .mat-slider-thumb,
-.mat-warn .mat-slider-thumb-label {
+.mat-slider.mat-warn .mat-slider-track-fill,
+.mat-slider.mat-warn .mat-slider-thumb,
+.mat-slider.mat-warn .mat-slider-thumb-label {
   background-color: #d9534b;
 }
-.mat-warn .mat-slider-thumb-label-text {
+.mat-slider.mat-warn .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-warn .mat-slider-focus-ring {
+.mat-slider.mat-warn .mat-slider-focus-ring {
   background-color: rgba(217, 83, 75, 0.2);
 }
 
@@ -2149,34 +2209,34 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-color: rgba(0, 0, 0, 0.38);
 }
 
-.mat-slider-disabled .mat-slider-track-background,
-.mat-slider-disabled .mat-slider-track-fill,
-.mat-slider-disabled .mat-slider-thumb {
+.mat-slider.mat-slider-disabled .mat-slider-track-background,
+.mat-slider.mat-slider-disabled .mat-slider-track-fill,
+.mat-slider.mat-slider-disabled .mat-slider-thumb {
   background-color: rgba(0, 0, 0, 0.26);
 }
-.mat-slider-disabled:hover .mat-slider-track-background {
+.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-.mat-slider-min-value .mat-slider-focus-ring {
+.mat-slider.mat-slider-min-value .mat-slider-focus-ring {
   background-color: rgba(0, 0, 0, 0.12);
 }
-.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
-.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
   background-color: rgba(0, 0, 0, 0.87);
 }
-.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
-.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
   background-color: rgba(0, 0, 0, 0.26);
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.26);
   background-color: transparent;
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.38);
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.26);
 }
 
@@ -2584,7 +2644,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   border-color: #b0b0b0;
 }
 .mat-checkbox-disabled .mat-checkbox-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0, 0, 0, 0.38);
 }
 
 .mat-checkbox .mat-ripple-element {
@@ -2721,39 +2781,37 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-.mat-primary .mat-slider-track-fill,
-.mat-primary .mat-slider-thumb,
-.mat-primary .mat-slider-thumb-label {
+.mat-slider.mat-primary .mat-slider-track-fill,
+.mat-slider.mat-primary .mat-slider-thumb,
+.mat-slider.mat-primary .mat-slider-thumb-label {
   background-color: #1b68fa;
 }
-.mat-primary .mat-slider-thumb-label-text {
+.mat-slider.mat-primary .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-primary .mat-slider-focus-ring {
+.mat-slider.mat-primary .mat-slider-focus-ring {
   background-color: rgba(27, 104, 250, 0.2);
 }
-
-.mat-accent .mat-slider-track-fill,
-.mat-accent .mat-slider-thumb,
-.mat-accent .mat-slider-thumb-label {
+.mat-slider.mat-accent .mat-slider-track-fill,
+.mat-slider.mat-accent .mat-slider-thumb,
+.mat-slider.mat-accent .mat-slider-thumb-label {
   background-color: #1b68fa;
 }
-.mat-accent .mat-slider-thumb-label-text {
+.mat-slider.mat-accent .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-accent .mat-slider-focus-ring {
+.mat-slider.mat-accent .mat-slider-focus-ring {
   background-color: rgba(27, 104, 250, 0.2);
 }
-
-.mat-warn .mat-slider-track-fill,
-.mat-warn .mat-slider-thumb,
-.mat-warn .mat-slider-thumb-label {
+.mat-slider.mat-warn .mat-slider-track-fill,
+.mat-slider.mat-warn .mat-slider-thumb,
+.mat-slider.mat-warn .mat-slider-thumb-label {
   background-color: #d9534b;
 }
-.mat-warn .mat-slider-thumb-label-text {
+.mat-slider.mat-warn .mat-slider-thumb-label-text {
   color: white;
 }
-.mat-warn .mat-slider-focus-ring {
+.mat-slider.mat-warn .mat-slider-focus-ring {
   background-color: rgba(217, 83, 75, 0.2);
 }
 
@@ -2762,34 +2820,34 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-color: rgba(0, 0, 0, 0.38);
 }
 
-.mat-slider-disabled .mat-slider-track-background,
-.mat-slider-disabled .mat-slider-track-fill,
-.mat-slider-disabled .mat-slider-thumb {
+.mat-slider.mat-slider-disabled .mat-slider-track-background,
+.mat-slider.mat-slider-disabled .mat-slider-track-fill,
+.mat-slider.mat-slider-disabled .mat-slider-thumb {
   background-color: rgba(0, 0, 0, 0.26);
 }
-.mat-slider-disabled:hover .mat-slider-track-background {
+.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-.mat-slider-min-value .mat-slider-focus-ring {
+.mat-slider.mat-slider-min-value .mat-slider-focus-ring {
   background-color: rgba(0, 0, 0, 0.12);
 }
-.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
-.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
   background-color: rgba(0, 0, 0, 0.87);
 }
-.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
-.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
+.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
   background-color: rgba(0, 0, 0, 0.26);
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.26);
   background-color: transparent;
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.38);
 }
-.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
+.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
   border-color: rgba(0, 0, 0, 0.26);
 }
 
@@ -4479,7 +4537,7 @@ html, body {
 }
 
 .mat-dialog-title {
-  font-weight: 300 !important;
+  font-weight: 500 !important;
 }
 
 .mat-dialog-close-button, [mat-dialog-close][mat-icon-button] {
@@ -4488,6 +4546,10 @@ html, body {
   right: -4px;
   top: -4px;
 }
+.mat-dialog-close-button.no-title, .no-title[mat-dialog-close][mat-icon-button] {
+  right: -10px;
+  top: -10px;
+}
 
 mat-dialog-content.fill, [mat-dialog-content].fill {
   width: calc(100% + 48px) !important;

package/styles.scss

@@ -1,4 +1,4 @@
-@use '@angular/material/theming' as mat;
+@use '@angular/material' as mat;
 @use './scss/config/theme';
 
 // Google Fonts
@@ -10,20 +10,19 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.mat-core();
+@include mat.core();
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.angular-material-theme(theme.$vision-theme);
+@include mat.all-component-themes(theme.$vision-theme);
 
 // Override accent color in some components
-// mat.$mat-theme-ignore-duplication-warnings: true;
-@include mat.mat-checkbox-color(theme.$vision-accent-override);
-@include mat.mat-pseudo-checkbox-color(theme.$vision-accent-override); // within lists and stuff
-@include mat.mat-radio-theme(theme.$vision-accent-override);
-@include mat.mat-slide-toggle-color(theme.$vision-accent-override);
-@include mat.mat-slider-color(theme.$vision-accent-override);
+@include mat.checkbox-color(theme.$vision-accent-override);
+@include mat.pseudo-checkbox-color(theme.$vision-accent-override); // within lists and stuff
+@include mat.radio-color(theme.$vision-accent-override);
+@include mat.slide-toggle-color(theme.$vision-accent-override);
+@include mat.slider-color(theme.$vision-accent-override);
 
 // Config
 @import './scss/config/colors';