@telekom/scale-components/dist/collection/components/menu-flyout-item/menu-flyout-item.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 {
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  display: block;
  position: relative;
  outline-color: transparent;
  /* So outline is visible on the sides */
  padding-left: var(--telekom-spacing-composition-space-02);
  padding-right: var(--telekom-spacing-composition-space-02);

  --_min-width: fit-content;
  --_min-width-moz: -moz-fit-content;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.menu-flyout-item {
  position: relative;
  display: flex;
  align-items: stretch;
  text-align: left;
  font-size: var(--telekom-typography-font-size-body);
  line-height: 2.635em;
  /* calc here to account for the extra padding for the outline */
  padding: 0
    calc(
      var(--telekom-spacing-composition-space-08) -
        var(--telekom-spacing-composition-space-02)
    );
  user-select: none;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
  color: var(--telekom-color-text-and-icon-standard);
  /* 10px relates to the PAD value in Menu component */
  max-width: calc(
    100vw - 2 * var(--telekom-spacing-composition-space-08) - 2 * 10px
  );
  overflow: hidden;
  min-width: var(--_min-width-moz);
  min-width: var(--_min-width);
}

.menu-flyout-item:focus:not(.menu-flyout-item--disabled),
.menu-flyout-item:hover:not(.menu-flyout-item--disabled) {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

:host(:focus) .menu-flyout-item:not(.menu-flyout-item--disabled) {
  color: var(--telekom-color-text-and-icon-standard);
}

:host(:focus) .menu-flyout-item:hover:not(.menu-flyout-item--disabled) {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

:host(:focus) {
  outline: none;
}

:host(:focus) .menu-flyout-item {
  outline: var(--focus-outline);
  border-radius: var(--telekom-radius-small);
}

:host(:active) .menu-flyout-item:not(.menu-flyout-item--disabled) {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}

:host([aria-expanded='true']) .menu-flyout-item {
  color: var(--telekom-color-text-and-icon-primary-standard);
}

.menu-flyout-item--disabled {
  outline: none;
  color: var(--telekom-color-text-and-icon-disabled);
  cursor: not-allowed;
}

:host([active])::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--telekom-color-primary-standard);
  /* a11y: HCM */
  border-left: var(--telekom-spacing-composition-space-02) solid transparent;
}

.menu-flyout-item--active {
  color: var(--telekom-color-text-and-icon-primary-standard);
}

/* a11y: HCM */
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .menu-flyout-item--disabled:not(.menu-flyout-item--disabled),
  .menu-flyout-item--active:not(.menu-flyout-item--disabled) {
    color: white;
    stroke: white;
  }
}

.menu-flyout-item__label {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-flyout-item__prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.menu-flyout-item__check,
slot[name='prefix']::slotted(:last-of-type) {
  margin-right: var(--telekom-spacing-composition-space-04);
}

.menu-flyout-item__check {
  visibility: hidden;
}

:host([aria-checked='true']) .menu-flyout-item__check {
  visibility: visible;
}

.menu-flyout-item__suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.menu-flyout-item__cascade,
slot[name='suffix']::slotted(:first-of-type) {
  margin-left: var(--telekom-spacing-composition-space-06);
}