.user-panel ::ng-deep {
  display: flex;
  flex-direction: column;

  ::ng-deep .app .header-toolbar & .user-button.dx-dropdownbutton img.dx-icon {
    height: 100%;
    width: auto;

    ::ng-deep .dx-theme-generic & {
      max-height: 32px;
    }
  }

  .user-button.dx-dropdownbutton {
    margin-left: 5px;

    img.dx-icon {
      border-radius: 50%;
      margin: 0;
      width: auto;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      border: 1px solid var(--dx-color-border);
      object-fit: cover;
      object-position: top;
      background: rgb(255, 255, 255);
      background-clip: padding-box;
    }

    .dx-buttongroup {
      vertical-align: middle;

      .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
        .dx-button-content {
          padding: 0;
        }

        &.dx-state-hover,
        &.dx-state-focused {
          background-color: transparent;

          img.dx-icon {
            border-color: var(--dx-color-primary);
          }
        }
      }
    }
  }
}
