::ng-deep {

  .db-management-control {
    --mat-select-panel-background-color: var(--db-background);
    --mat-select-container-elevation-shadow: var(--db-shadow-3);
    --mat-option-label-text-font: var(--db-font-family);

    --mat-option-label-text-tracking: 0;
    --mat-option-label-text-weight: 400;
    --mat-option-selected-state-label-text-color: var(--db-text-1);
    --mat-option-label-text-color: var(--db-text-1);
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--db-text-1);
    --mat-option-selected-state-layer-color: var(--db-primary-soft);
    --mat-option-hover-state-layer-color: var(--db-select-option-hover-state-layer-color);
    --mat-option-focus-state-layer-color: var(--db-select-option-focus-state-layer-color);

    --mat-option-label-text-size: calc(14px * var(--flow-scale, 1));
    --mat-option-label-text-line-height: calc(16px * var(--flow-scale, 1));
    --mat-option-padding: calc(4px * var(--flow-scale, 1)) calc(12px * var(--flow-scale, 1));
    --mat-panel-padding: calc(16px * var(--flow-scale, 1)) calc(8px * var(--flow-scale, 1));

    &.mat-mdc-select-panel {
      padding: var(--mat-panel-padding);
      .mat-mdc-option {
        min-height: unset;
        padding: var(--mat-option-padding);
        text-align: right;

        .mdc-list-item__primary-text {
          text-align: right;
          width: 100%;
        }

        .mat-pseudo-checkbox {
          display: none;
        }
      }
    }

    &.cdk-menu-group {
      --icon-size: calc(16px * var(--flow-scale, 1));
      width: 100%;
      outline: 0;
      overflow: auto;
      padding: var(--mat-panel-padding);
      border-radius: 2px;
      box-sizing: border-box;
      position: static;
      background-color: var(--mat-select-panel-background-color);
      box-shadow: var(--mat-select-container-elevation-shadow);

      .cdk-menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: calc(16px * var(--flow-scale, 1));
        min-height: unset;
        min-width: calc(80px * var(--flow-scale, 1));
        padding: var(--mat-option-padding);
        font-size: var(--mat-option-label-text-size);
        line-height: var(--mat-option-label-text-line-height);
        font-weight: var(--mat-option-label-text-weight);
        color: var(--mat-option-label-text-color);
        cursor: pointer;
        outline: none;
        border: none;

        &:hover {
          background-color: var(--mat-option-hover-state-layer-color);
        }

        .mat-icon {
          display: block;
          width: var(--icon-size);
          height: var(--icon-size);
          font-size: var(--icon-size);
          color: inherit;
        }
      }
    }
  }
}
