@testgorilla/tgo-ui 2.26.21 → 2.27.0

package/projects/tgo-canopy-ui/theme/_input.scss

@@ -1,574 +1,574 @@
-@use "variables.scss" as *;
-
-ui-dropdown, ui-autocomplete {
-  .mat-mdc-form-field {
-    &.keyboard-focused {
-      position: relative;
-
-      .mat-mdc-text-field-wrapper {
-        outline: 2px solid $black;
-        animation: focus-ring-animation-main 0.4s forwards;
-        outline-offset: 4px;
-
-        &:after {
-          content: '';
-          position: absolute;
-          top: -0;
-          border-radius: 10px;
-          left: -0;
-          width: 100%;
-          height: 100%;
-          outline: 4px solid $tgo-white;
-          z-index: -1;
-        }
-      }
-
-      .mat-mdc-form-field-subscript-wrapper {
-        z-index: -1;
-      }
-    }
-
-    &.has-label {
-      .mdc-notched-outline__notch {
-        position: relative;
-
-        &:after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          background: white;
-          width: 100%;
-          height: 5px;
-          z-index: -1;
-        }
-      }
-    }
-  }
-}
-
-.active-field {
-  .mdc-notched-outline__leading {
-    border-left-width: 2px;
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__notch {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__trailing {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-    border-right-width: 2px;
-  }
-}
-
-*[theme="classic"] {
-  .mat-mdc-form-field {
-    .mat-mdc-form-field-hint.error,
-    .mat-mdc-form-field-hint.error svg {
-      color: $tgo-error-default;
-    }
-  }
-
-  .mat-mdc-form-field:not(.mat-warn) {
-    &.mat-form-field-appearance-outline {
-      .mat-mdc-text-field-wrapper {
-        height: 48px;
-
-        &:hover, &.mdc-text-field--focused {
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 21px !important;
-          }
-
-          @extend .active-field;
-
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $tgo-petrol-default !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-            color: $tgo-petrol-default !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-*[theme="dark"], *[theme="light"], .dark, .light {
-
-  &.phone-number-select {
-    margin-top: 8px;
-    border-radius: 10px!important;
-    box-shadow: $box-shadow-hover-state;
-
-    .country-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .mat-mdc-option {
-      --mat-option-selected-state-layer-color: #{$grayscale-10};
-      --mat-option-selected-state-label-text-color: #{$black};
-
-      .mdc-list-item__primary-text small {
-        font-size: 14px;
-      }
-
-      .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
-        color: $black;
-        width: 12px;
-        height: 5px;
-      }
-      &:hover {
-        background-color: $brand-10;
-      }
-    }
-
-    .mat-divider {
-      display: none;
-    }
-  }
-
-  .mat-mdc-autocomplete-panel, &.mat-mdc-autocomplete-panel {
-    box-shadow: $box-shadow-hover-state;
-    border-radius: 10px;
-    .mat-mdc-option.selected-option,
-    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-      &:hover {
-        background: var(--ui-autocomplete-option-color) !important;
-      }
-      background: $grayscale-10!important;
-    }
-    .mat-mdc-option:hover:not(.mdc-list-item--disabled)     {
-      background: var(--ui-autocomplete-option-color) !important;
-    }
-
-    .mat-mdc-option:active:not(.mdc-list-item--disabled)     {
-      background: var(--ui-autocomplete-option-color) !important;
-    }
-
-    .mat-mdc-option {
-      .mdc-list-item__primary-text, span {
-        color: $black!important;
-        font-weight: 400;
-      }
-    }
-
-    .mat-mdc-optgroup-label {
-      .mdc-list-item__primary-text {
-        font-size: 14px!important;
-      }
-    }
-
-    .mat-mdc-optgroup {
-      .mdc-list-item__primary-text {
-        color: $black!important;
-        text-transform: lowercase;
-      }
-
-      .mdc-list-item__primary-text:first-letter {
-        text-transform: uppercase!important;
-      }
-    }
-
-    .cdk-virtual-scroll-content-wrapper {
-      .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
-        background: transparent!important;
-      }
-    }
-
-    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
-      background: transparent!important;
-    }
-  }
-
-  .ui-dropdown-list, &.ui-dropdown-list {
-    .mat-mdc-option .mat-mdc-focus-indicator {
-      display: none;
-    }
-
-    .mat-mdc-option, .mat-option-section .section-title {
-      color: $black!important;
-    }
-
-    .mat-mdc-option-multiple .mat-pseudo-checkbox {
-      border-radius: 4px;
-      border-width: 1px;
-      border-color: $black;
-    }
-
-    .mat-mdc-option .mat-pseudo-checkbox-minimal {
-      transform: scale(0.9);
-    }
-
-    &.mat-warn mat-option,
-    &.mat-accent mat-option,
-    &.mat-accent .mat-mdc-option-multiple {
-      &:hover {
-        background: var(--dropdown-color-option-hover)!important;
-      }
-
-      &:active {
-        background: var(--dropdown-color-option-active)!important;
-      }
-
-      &.mat-mdc-option-active,
-      &.mdc-list-item--selected {
-        background-color: $grayscale-10!important;
-
-        .mdc-list-item__primary-text, .mat-pseudo-checkbox-checked:after {
-          color: $black!important;
-        }
-
-        &:hover:not(.mdc-list-item--disabled),
-        &:focus:not(.mdc-list-item--disabled) {
-          background-color: $grayscale-10;
-        }
-      }
-    }
-
-    .mat-mdc-option-multiple.mdc-list-item--selected .mat-pseudo-checkbox-full {
-      background: $brand-50;
-      border-color: $brand-50;
-      &:after {
-        border-color: $tgo-white;
-      }
-    }
-  }
-
-  .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
-    &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
-      --mdc-outlined-text-field-caret-color: #{$black};
-
-      .mdc-text-field__input::placeholder {
-        color: $grayscale-50;
-      }
-
-      .mat-mdc-form-field-hint.error,
-      .mat-mdc-form-field-hint.error svg {
-        color: $error-50;
-        row-gap: 0;
-      }
-
-      .mat-mdc-form-field-subscript-wrapper {
-        padding: 0!important;
-        min-height: 24px;
-
-        &:after, &:before {
-          display: none;
-        }
-      }
-
-      input, .mat-text-field__input {
-        caret-color: $black;
-      }
-
-      &.mat-focused {
-        ui-icon:not(.clear) {
-          svg {
-            color: $black;
-          }
-        }
-      }
-
-      .mat-mdc-text-field-wrapper {
-        background: $tgo-white;
-        border-radius: 10px;
-        height: 48px;
-
-        &:hover {
-          ui-icon {
-            svg {
-              color: $black!important;
-            }
-          }
-        }
-
-        ui-icon {
-          svg {
-            color: $grayscale-40!important;
-          }
-
-          &:focus-visible {
-            svg {
-              color: $black!important;
-            }
-          }
-        }
-
-        .value-tag {
-          ui-icon {
-            svg {
-              color: $black!important;
-            }
-          }
-
-          &:hover {
-            ui-icon {
-              svg {
-                color: $tgo-white!important;
-              }
-            }
-          }
-        }
-
-        .mdc-notched-outline__notch {
-          label {
-            color: $grayscale-50 !important;
-          }
-        }
-
-        &.mdc-text-field--disabled {
-          * {
-            border-color: $grayscale-30!important;
-            color: $grayscale-30!important;
-            pointer-events: none!important;
-          }
-
-          .mdc-notched-outline__notch {
-            label {
-              color: $grayscale-20 !important;
-            }
-          }
-        }
-
-        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-          color: $black !important;
-        }
-
-        .mdc-notched-outline__leading {
-          border-top-left-radius: 10px;
-          border-bottom-left-radius: 10px;
-        }
-
-        .mdc-notched-outline__trailing {
-          border-top-right-radius: 10px;
-          border-bottom-right-radius: 10px;
-        }
-
-        &:hover {
-          .mat-mdc-form-field-icon-prefix svg {
-            color: $black !important;
-          }
-
-          .password .icon-only-wrapper svg {
-            color: $black !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 21px !important;
-          }
-        }
-
-        &:hover, &.mdc-text-field--focused {
-          .mat-mdc-form-field-icon-prefix svg {
-            color: $black !important;
-          }
-
-          @extend .active-field;
-
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $black !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-            color: $black !important;
-          }
-        }
-      }
-
-      &.mat-warn {
-
-        .mat-mdc-form-field-required-marker:after {
-          color: $error-50;
-        }
-
-        mat-label {
-          color: $error-50!important;
-        }
-
-        .mat-mdc-form-field-hint.error {
-          color: $error-50 !important;
-
-          a {
-            color: $error-50!important;
-          }
-
-
-          svg {
-            color: $error-50 !important;
-          }
-        }
-
-        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-          color: $error-50 !important;
-        }
-
-        .mat-mdc-text-field-wrapper {
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $error-50 !important;
-          }
-
-          &:hover, &.mdc-text-field--focused {
-            .mat-mdc-form-field-icon-prefix svg {
-              color: $error-50 !important;
-            }
-
-            @extend .active-field;
-
-            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-              border-color: $error-50 !important;
-            }
-
-            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-              color: $error-50 !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// this overrides for dark ui-dropdown used in coderunner only. will be removed with proper rebranded dark theme
-*[theme="dark"], .dark {
-  .ui-dropdown-list.mat-accent {
-    background-color: $grayscale-50;
-
-    mat-option {
-      background-color: $grayscale-50 !important;
-
-      &:hover, &.mat-mdc-option-active {
-        background-color: $grayscale-40 !important;
-      }
-
-      &, &.mat-mdc-option-active {
-        .mdc-list-item__primary-text {
-          color: $tgo-white !important;
-        }
-      }
-    }
-  }
-
-  .mat-mdc-select-placeholder {
-    color: $grayscale-40;
-  }
-
-  .ui-dropdown .mat-mdc-select {
-    color: $tgo-white;
-  }
-}
-
-.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
-  border-radius: 10px !important;
-  box-shadow: $box-shadow-hover-state;
-
-  &.mat-accent mat-option,
-  &.mat-accent .mat-mdc-option-multiple {
-    &:hover:not(.mdc-list-item--disabled),
-    &:focus:not(.mdc-list-item--disabled) {
-      background-color: $tgo-medium;
-    }
-
-    &.mat-mdc-option-active,
-    &.mdc-list-item--selected {
-      background-color: $tgo-petrol-90w;
-      color: $tgo-black;
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled) {
-        background-color: $tgo-petrol-secondary;
-      }
-    }
-  }
-
-  &.mat-warn mat-option,
-  &.mat-warn .mat-mdc-option-multiple {
-    &:hover:not(.mdc-list-item--disabled),
-    &:focus:not(.mdc-list-item--disabled) {
-      background-color: $tgo-medium;
-    }
-
-    &.mat-mdc-option-active,
-    &.mdc-list-item--selected {
-      background-color: $tgo-error-secondary;
-      color: $tgo-black;
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled) {
-        background-color: $tgo-error-60w;
-      }
-    }
-  }
-}
-
-.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,
-.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label {
-  color: $grayscale-50!important;
-
-  &:active {
-    color: $black!important;
-  }
-}
-
-.mat-mdc-form-field {
-  .mat-mdc-form-field-hint-wrapper {
-    padding: 0;
-
-    .errors {
-      padding-top: 4px;
-      padding-bottom: 10px;
-    }
-
-    span, .mat-mdc-form-field-hint-spacer {
-      line-height: 16px;
-    }
-  }
-
-  .mat-mdc-form-field-hint:before {
-    height: 0!important;
-  }
-
-  .mat-mdc-form-field-hint.error {
-    display: flex;
-    flex-flow: column;
-    row-gap: 4px;
-
-    .errors {
-      ui-icon {
-        margin-right: 4px;
-      }
-
-      align-items: center;
-      display: flex;
-    }
-  }
-}
-
-
-.custom-errors {
-  ui-icon {
-    margin-right: 4px;
-  }
-  svg {
-    color: $error-50 !important;
-  }
-
-  align-items: center;
-  display: flex;
-  color: $error-50 !important;
-  padding: 4px 0 10px 0;
-  font-size: 12px;
-  line-height: 16px;
-  position: relative;
-}
-
-.light.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled),
-.dark.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-  background: var(--ui-autocomplete-option-color)!important;
-}
+@use "variables.scss" as *;
+
+ui-dropdown, ui-autocomplete {
+  .mat-mdc-form-field {
+    &.keyboard-focused {
+      position: relative;
+
+      .mat-mdc-text-field-wrapper {
+        outline: 2px solid $black;
+        animation: focus-ring-animation-main 0.4s forwards;
+        outline-offset: 4px;
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: -0;
+          border-radius: 10px;
+          left: -0;
+          width: 100%;
+          height: 100%;
+          outline: 4px solid $tgo-white;
+          z-index: -1;
+        }
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        z-index: -1;
+      }
+    }
+
+    &.has-label {
+      .mdc-notched-outline__notch {
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: white;
+          width: 100%;
+          height: 5px;
+          z-index: -1;
+        }
+      }
+    }
+  }
+}
+
+.active-field {
+  .mdc-notched-outline__leading {
+    border-left-width: 2px;
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__notch {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__trailing {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+    border-right-width: 2px;
+  }
+}
+
+*[theme="classic"] {
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-hint.error,
+    .mat-mdc-form-field-hint.error svg {
+      color: $tgo-error-default;
+    }
+  }
+
+  .mat-mdc-form-field:not(.mat-warn) {
+    &.mat-form-field-appearance-outline {
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+
+        &:hover, &.mdc-text-field--focused {
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+            top: 21px !important;
+          }
+
+          @extend .active-field;
+
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $tgo-petrol-default !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $tgo-petrol-default !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+*[theme="dark"], *[theme="light"], .dark, .light {
+
+  &.phone-number-select {
+    margin-top: 8px;
+    border-radius: 10px!important;
+    box-shadow: $box-shadow-hover-state;
+
+    .country-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .mat-mdc-option {
+      --mat-option-selected-state-layer-color: #{$grayscale-10};
+      --mat-option-selected-state-label-text-color: #{$black};
+
+      .mdc-list-item__primary-text small {
+        font-size: 14px;
+      }
+
+      .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
+        color: $black;
+        width: 12px;
+        height: 5px;
+      }
+      &:hover {
+        background-color: $brand-10;
+      }
+    }
+
+    .mat-divider {
+      display: none;
+    }
+  }
+
+  .mat-mdc-autocomplete-panel, &.mat-mdc-autocomplete-panel {
+    box-shadow: $box-shadow-hover-state;
+    border-radius: 10px;
+    .mat-mdc-option.selected-option,
+    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
+      &:hover {
+        background: var(--ui-autocomplete-option-color) !important;
+      }
+      background: $grayscale-10!important;
+    }
+    .mat-mdc-option:hover:not(.mdc-list-item--disabled)     {
+      background: var(--ui-autocomplete-option-color) !important;
+    }
+
+    .mat-mdc-option:active:not(.mdc-list-item--disabled)     {
+      background: var(--ui-autocomplete-option-color) !important;
+    }
+
+    .mat-mdc-option {
+      .mdc-list-item__primary-text, span {
+        color: $black!important;
+        font-weight: 400;
+      }
+    }
+
+    .mat-mdc-optgroup-label {
+      .mdc-list-item__primary-text {
+        font-size: 14px!important;
+      }
+    }
+
+    .mat-mdc-optgroup {
+      .mdc-list-item__primary-text {
+        color: $black!important;
+        text-transform: lowercase;
+      }
+
+      .mdc-list-item__primary-text:first-letter {
+        text-transform: uppercase!important;
+      }
+    }
+
+    .cdk-virtual-scroll-content-wrapper {
+      .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
+        background: transparent!important;
+      }
+    }
+
+    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
+      background: transparent!important;
+    }
+  }
+
+  .ui-dropdown-list, &.ui-dropdown-list {
+    .mat-mdc-option .mat-mdc-focus-indicator {
+      display: none;
+    }
+
+    .mat-mdc-option, .mat-option-section .section-title {
+      color: $black!important;
+    }
+
+    .mat-mdc-option-multiple .mat-pseudo-checkbox {
+      border-radius: 4px;
+      border-width: 1px;
+      border-color: $black;
+    }
+
+    .mat-mdc-option .mat-pseudo-checkbox-minimal {
+      transform: scale(0.9);
+    }
+
+    &.mat-warn mat-option,
+    &.mat-accent mat-option,
+    &.mat-accent .mat-mdc-option-multiple {
+      &:hover {
+        background: var(--dropdown-color-option-hover)!important;
+      }
+
+      &:active {
+        background: var(--dropdown-color-option-active)!important;
+      }
+
+      &.mat-mdc-option-active,
+      &.mdc-list-item--selected {
+        background-color: $grayscale-10!important;
+
+        .mdc-list-item__primary-text, .mat-pseudo-checkbox-checked:after {
+          color: $black!important;
+        }
+
+        &:hover:not(.mdc-list-item--disabled),
+        &:focus:not(.mdc-list-item--disabled) {
+          background-color: $grayscale-10;
+        }
+      }
+    }
+
+    .mat-mdc-option-multiple.mdc-list-item--selected .mat-pseudo-checkbox-full {
+      background: $brand-50;
+      border-color: $brand-50;
+      &:after {
+        border-color: $tgo-white;
+      }
+    }
+  }
+
+  .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
+    &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
+      --mdc-outlined-text-field-caret-color: #{$black};
+
+      .mdc-text-field__input::placeholder {
+        color: $grayscale-50;
+      }
+
+      .mat-mdc-form-field-hint.error,
+      .mat-mdc-form-field-hint.error svg {
+        color: $error-50;
+        row-gap: 0;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        padding: 0!important;
+        min-height: 24px;
+
+        &:after, &:before {
+          display: none;
+        }
+      }
+
+      input, .mat-text-field__input {
+        caret-color: $black;
+      }
+
+      &.mat-focused {
+        ui-icon:not(.clear) {
+          svg {
+            color: $black;
+          }
+        }
+      }
+
+      .mat-mdc-text-field-wrapper {
+        background: $tgo-white;
+        border-radius: 10px;
+        height: 48px;
+
+        &:hover {
+          ui-icon {
+            svg {
+              color: $black!important;
+            }
+          }
+        }
+
+        ui-icon {
+          svg {
+            color: $grayscale-40!important;
+          }
+
+          &:focus-visible {
+            svg {
+              color: $black!important;
+            }
+          }
+        }
+
+        .value-tag {
+          ui-icon {
+            svg {
+              color: $black!important;
+            }
+          }
+
+          &:hover {
+            ui-icon {
+              svg {
+                color: $tgo-white!important;
+              }
+            }
+          }
+        }
+
+        .mdc-notched-outline__notch {
+          label {
+            color: $grayscale-50 !important;
+          }
+        }
+
+        &.mdc-text-field--disabled {
+          * {
+            border-color: $grayscale-30!important;
+            color: $grayscale-30!important;
+            pointer-events: none!important;
+          }
+
+          .mdc-notched-outline__notch {
+            label {
+              color: $grayscale-20 !important;
+            }
+          }
+        }
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+          color: $black !important;
+        }
+
+        .mdc-notched-outline__leading {
+          border-top-left-radius: 10px;
+          border-bottom-left-radius: 10px;
+        }
+
+        .mdc-notched-outline__trailing {
+          border-top-right-radius: 10px;
+          border-bottom-right-radius: 10px;
+        }
+
+        &:hover {
+          .mat-mdc-form-field-icon-prefix svg {
+            color: $black !important;
+          }
+
+          .password .icon-only-wrapper svg {
+            color: $black !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+            top: 21px !important;
+          }
+        }
+
+        &:hover, &.mdc-text-field--focused {
+          .mat-mdc-form-field-icon-prefix svg {
+            color: $black !important;
+          }
+
+          @extend .active-field;
+
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $black !important;
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $black !important;
+          }
+        }
+      }
+
+      &.mat-warn {
+
+        .mat-mdc-form-field-required-marker:after {
+          color: $error-50;
+        }
+
+        mat-label {
+          color: $error-50!important;
+        }
+
+        .mat-mdc-form-field-hint.error {
+          color: $error-50 !important;
+
+          a {
+            color: $error-50!important;
+          }
+
+
+          svg {
+            color: $error-50 !important;
+          }
+        }
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+          color: $error-50 !important;
+        }
+
+        .mat-mdc-text-field-wrapper {
+          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            border-color: $error-50 !important;
+          }
+
+          &:hover, &.mdc-text-field--focused {
+            .mat-mdc-form-field-icon-prefix svg {
+              color: $error-50 !important;
+            }
+
+            @extend .active-field;
+
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $error-50 !important;
+            }
+
+            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+              color: $error-50 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// this overrides for dark ui-dropdown used in coderunner only. will be removed with proper rebranded dark theme
+*[theme="dark"], .dark {
+  .ui-dropdown-list.mat-accent {
+    background-color: $grayscale-50;
+
+    mat-option {
+      background-color: $grayscale-50 !important;
+
+      &:hover, &.mat-mdc-option-active {
+        background-color: $grayscale-40 !important;
+      }
+
+      &, &.mat-mdc-option-active {
+        .mdc-list-item__primary-text {
+          color: $tgo-white !important;
+        }
+      }
+    }
+  }
+
+  .mat-mdc-select-placeholder {
+    color: $grayscale-40;
+  }
+
+  .ui-dropdown .mat-mdc-select {
+    color: $tgo-white;
+  }
+}
+
+.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
+  border-radius: 10px !important;
+  box-shadow: $box-shadow-hover-state;
+
+  &.mat-accent mat-option,
+  &.mat-accent .mat-mdc-option-multiple {
+    &:hover:not(.mdc-list-item--disabled),
+    &:focus:not(.mdc-list-item--disabled) {
+      background-color: $tgo-medium;
+    }
+
+    &.mat-mdc-option-active,
+    &.mdc-list-item--selected {
+      background-color: $tgo-petrol-90w;
+      color: $tgo-black;
+      &:hover:not(.mdc-list-item--disabled),
+      &:focus:not(.mdc-list-item--disabled) {
+        background-color: $tgo-petrol-secondary;
+      }
+    }
+  }
+
+  &.mat-warn mat-option,
+  &.mat-warn .mat-mdc-option-multiple {
+    &:hover:not(.mdc-list-item--disabled),
+    &:focus:not(.mdc-list-item--disabled) {
+      background-color: $tgo-medium;
+    }
+
+    &.mat-mdc-option-active,
+    &.mdc-list-item--selected {
+      background-color: $tgo-error-secondary;
+      color: $tgo-black;
+      &:hover:not(.mdc-list-item--disabled),
+      &:focus:not(.mdc-list-item--disabled) {
+        background-color: $tgo-error-60w;
+      }
+    }
+  }
+}
+
+.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,
+.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label {
+  color: $grayscale-50!important;
+
+  &:active {
+    color: $black!important;
+  }
+}
+
+.mat-mdc-form-field {
+  .mat-mdc-form-field-hint-wrapper {
+    padding: 0;
+
+    .errors {
+      padding-top: 4px;
+      padding-bottom: 10px;
+    }
+
+    span, .mat-mdc-form-field-hint-spacer {
+      line-height: 16px;
+    }
+  }
+
+  .mat-mdc-form-field-hint:before {
+    height: 0!important;
+  }
+
+  .mat-mdc-form-field-hint.error {
+    display: flex;
+    flex-flow: column;
+    row-gap: 4px;
+
+    .errors {
+      ui-icon {
+        margin-right: 4px;
+      }
+
+      align-items: center;
+      display: flex;
+    }
+  }
+}
+
+
+.custom-errors {
+  ui-icon {
+    margin-right: 4px;
+  }
+  svg {
+    color: $error-50 !important;
+  }
+
+  align-items: center;
+  display: flex;
+  color: $error-50 !important;
+  padding: 4px 0 10px 0;
+  font-size: 12px;
+  line-height: 16px;
+  position: relative;
+}
+
+.light.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled),
+.dark.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
+  background: var(--ui-autocomplete-option-color)!important;
+}