Autocomplete, checkbox, controls

src/assets/styles/_common-variables.scss

@@ -12,6 +12,8 @@
     --iqser-btn-bg: #f0f1f4;
     --iqser-warn: #fdbd00;
     --iqser-white: white;
+    --iqser-black: black;
+    --iqser-light: white;
     --iqser-separator: rgba(226, 228, 233, 0.9);
     --iqser-quick-filter-border: #d3d5da;
     --iqser-grey-2: #f4f5f7;

src/assets/styles/common-autocomplete.scss

@@ -0,0 +1,9 @@
+@use 'common-mixins';
+
+.mat-autocomplete-panel {
+    @include common-mixins.scroll-bar;
+
+    .mat-option {
+        font-size: inherit;
+    }
+}

src/assets/styles/common-checkbox.scss

@@ -0,0 +1,36 @@
+
+.mat-checkbox .mat-checkbox-frame {
+    border: 1px solid var(--iqser-grey-5);
+}
+
+.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+.mat-checkbox-checked.mat-accent .mat-checkbox-background {
+    margin-top: 1px;
+    margin-left: 1px;
+    width: 18px;
+    height: 18px;
+}
+
+.mat-checkbox-layout {
+    align-items: center !important;
+
+    .mat-checkbox-inner-container {
+        margin-left: 0;
+    }
+
+    .mat-checkbox-label {
+        font-size: 13px;
+        color: var(--iqser-accent);
+
+        display: flex;
+        align-items: center;
+
+        > *:not(:last-child) {
+            margin-right: 8px;
+        }
+    }
+}
+
+.mat-checkbox.error .mat-checkbox-label {
+    color: var(--iqser-primary);
+}

src/assets/styles/common-controls.scss

@@ -0,0 +1,47 @@
+.btn-group {
+    display: flex;
+    flex-direction: row;
+
+    .btn-group-btn {
+        cursor: pointer;
+        color: var(--iqser-accent);
+        background: var(--iqser-white);
+        font-family: Inter, sans-serif;
+        font-size: 13px;
+        line-height: 14px;
+        padding: 10px 14px;
+        transition: color 0.25s ease-in-out;
+        outline: none;
+        border: none;
+
+        &:hover {
+            color: var(--iqser-black);
+        }
+
+        &.active {
+            color: var(--iqser-light);
+            background: var(--iqser-primary);
+            border-radius: 17px;
+        }
+
+        &.active:hover {
+            color: var(--iqser-grey-3);
+        }
+    }
+}
+
+.icon-10 {
+    width: 10px;
+    height: 10px;
+}
+
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently
+                                     supported by Chrome, Edge, Opera and Firefox */
+}

src/assets/styles/common-styles.scss

@@ -9,3 +9,6 @@
 @use 'common-menu';
 @use 'common-base-screen';
 @use 'common-breadcrumbs';
+@use 'common-autocomplete';
+@use 'common-checkbox';
+@use 'common-controls';