@telekom/scale-components/dist/collection/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --border-width-divider: var(--telekom-spacing-composition-space-01);
  --color-divider: var(--telekom-color-ui-subtle);
  --color-menu-item-hover: var(--telekom-color-text-and-icon-primary-hovered);
  --color-menu-item-active: var(--telekom-color-text-and-icon-primary-pressed);
  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus-standard);
}

.app-navigation-user-menu {
  width: 100%;
  position: relative;
  min-width: 260px;
}

.app-navigation-user-menu__divider {
  margin: var(--telekom-spacing-composition-space-06) 0;
  border: 0;
  border-top: var(--border-width-divider) solid var(--color-divider);
}

@media (min-width: 1040px) {
  .app-navigation-user-menu__user-info {
    margin: var(--telekom-spacing-composition-space-05)
      var(--telekom-spacing-composition-space-08) 0
      var(--telekom-spacing-composition-space-08);
  }
}

@media (max-width: 1039px) {
  .app-navigation-user-menu__user-info {
    margin: var(--telekom-spacing-composition-space-08)
      var(--telekom-spacing-composition-space-06) 0
      var(--telekom-spacing-composition-space-06);
  }
}

.app-navigation-user-menu__user-info--name {
  font: var(--telekom-text-style-heading-5);
  margin-bottom: var(--telekom-spacing-composition-space-03);
}
.app-navigation-user-menu__user-info--email {
  color: var(--telekom-color-text-and-icon-additional);
  font: var(--telekom-text-style-body);
}

.app-navigation-user-menu__item {
  display: flex;
  font: var(--telekom-text-style-heading-6);
  padding: var(--telekom-spacing-composition-space-04)
    var(--telekom-spacing-composition-space-06);
  border-radius: calc(var(--telekom-radius-small) / 2);
  color: var(--telekom-color-text-and-icon-standard);
  text-decoration: none;
}

@media (min-width: 1040px) {
  .app-navigation-user-menu__item {
    padding: var(--telekom-spacing-composition-space-04)
      var(--telekom-spacing-composition-space-08);
  }
}

.app-navigation-user-menu__item:hover {
  color: var(--color-menu-item-hover);
}

.app-navigation-user-menu__item:active {
  color: var(--color-menu-item-active);
}

.app-navigation-user-menu__item:focus {
  outline: none;
  box-shadow: var(--box-shadow-focus);
}

.app-navigation-user-menu__item--icon-prefix {
  margin-right: var(--telekom-spacing-composition-space-04);
}
.app-navigation-user-menu__item--icon-suffix {
  margin-left: var(--telekom-spacing-composition-space-04);
}

.app-navigation-user-menu__button {
  padding: var(--telekom-spacing-composition-space-04)
    var(--telekom-spacing-composition-space-06);
}

@media (min-width: 1040px) {
  .app-navigation-user-menu__button {
    padding: var(--telekom-spacing-composition-space-04)
      var(--telekom-spacing-composition-space-08);
  }
}
@media (min-width: 1040px) {
  .app-navigation-user-menu {
    padding-bottom: var(--telekom-spacing-composition-space-03);
  }
}