zitadel/console/src/styles/input.scss

@use '@angular/material' as mat;

@mixin input-theme($theme) {
  $primary: map-get($theme, primary);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $primary-light-color: mat.get-color-from-palette($primary, 200);
  $warn: map-get($theme, warn);
  $warn-color: mat.get-color-from-palette($warn, 500);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  [cnslInput],
  .mat-select {
    box-sizing: border-box;
    padding-inline-start: 10px;
    outline: none;
    display: inline-block;
    text-align: start;
    cursor: text;
    transform: all 0.2 linear;
    font-size: 1rem;
    border: none;
    border: 1px solid if($is-dark-theme, #f9f7f775, #1a191954);
    background-color: if($is-dark-theme, #00000040, #00000004);
    border-radius: 4px;
    height: 40px;
    padding: 10px;
    transition: border-color 0.15s ease-in-out, background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
      color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    color: mat.get-color-from-palette($foreground, text);
    margin-bottom: 2px;

    &:hover {
      border-color: if($is-dark-theme, #e0e0e0, #1a1b1b);
    }

    &:active,
    &:focus {
      border-color: $primary-color;
    }

    &.ng-touched {
      &.ng-invalid {
        border-color: $warn-color;
      }
    }

    &[disabled] {
      border-color: if($is-dark-theme, #36373850, #cccdce50);
      color: if($is-dark-theme, #ffffff80, #00000061);

      &::placeholder {
        color: if($is-dark-theme, #ffffff80, #00000061);
      }
    }
  }

  [cnslInput]::placeholder {
    font-size: 14px;
    color: map-get($foreground, placeholder-text);
    font-style: italic;
  }

  .mat-paginator {
    .mat-select {
      background-color: inherit;
    }
  }
}