@shopware-ag/meteor-component-library/dist/mt-popover-item.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

/* ------------------------------------
 * Administration variables
 * Table of contents
 *
 * 1. Primary colors
 * 2. Status colors
 * 3. Module colors
 * 4. Generic colors
 * 5. Gradients
 * 6. Typography
 * 7. Miscellaneous
 * 8. z-index
 * 9. Global widths
 * ------------------------------------ */
/* ------------------------------------
 * 1. Primary colors
 * ------------------------------------ */
/* ------------------------------------
 * 2. Status colors
 * ------------------------------------ */
/* ------------------------------------
 * 3. Module colors
 * ------------------------------------ */
/* ------------------------------------
 * 4. Generic colors
 * ------------------------------------ */
/* ------------------------------------
 * 5. Gradients
 * ------------------------------------ */
/* ------------------------------------
 * 6. Typography
 * ------------------------------------ */
/* ------------------------------------
 * 7. Miscellaneous
 * ------------------------------------ */
/* ------------------------------------
 * 8. z-index
 * ------------------------------------ */
/**
* Use inter-font instead of normal font for popover. Also add the new variables to this file.
*/
.mt-popover-item {
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary-default);
  padding: var(--scale-size-8) 0;
}
.mt-popover-item * {
  font-family: var(--font-family-body);
}
@supports (font-variation-settings: normal) {
.mt-popover-item * {
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-feature-settings: "ss01" on, "ss02" on, "case" on, "cpsp" on, "zero" on, "cv09" on, "cv07" on, "cv06" on, "cv10" on, "cv11" on;
}
}
.mt-popover-item.mt-popover-item--clickable {
  cursor: pointer;
}
.mt-popover-item.mt-popover-item--clickable:hover {
  position: relative;
}
.mt-popover-item.mt-popover-item--clickable:hover::before {
  content: "";
}
.mt-popover-item:hover::before {
  position: absolute;
  background-color: var(--color-interaction-secondary-hover);
  border-radius: var(--border-radius-xs);
  top: var(--scale-size-4);
  right: -8px;
  bottom: var(--scale-size-4);
  left: -8px;
  pointer-events: none;
}
.mt-popover-item.is--draggable {
  cursor: grab;
}
.mt-popover-item--critical {
  color: var(--color-text-critical-default);
}
.mt-popover-item--critical:hover::before {
  background-color: var(--color-background-critical-default);
}
.mt-popover-item--active {
  text-decoration: underline;
}
.mt-popover-item--disabled {
  color: var(--color-text-primary-disabled);
}
.mt-popover-item--disabled:hover {
  text-decoration: none;
  cursor: default;
}
.mt-popover-item--disabled:hover::before {
  background-color: transparent;
}
.mt-popover-item--border-top {
  border-top: 1px solid var(--color-border-secondary-default);
  margin-top: -1px;
}
.mt-popover-item--border-bottom {
  border-bottom: 1px solid var(--color-border-secondary-default);
  margin-bottom: -1px;
}
.mt-popover-item__top-row {
  display: flex;
  gap: var(--scale-size-8);
  z-index: 1;
}
.mt-popover-item__align-right {
  display: flex;
  gap: var(--scale-size-8);
  margin-left: auto;
}
.mt-popover-item__checkbox {
  margin-top: var(--scale-size-4);
}
.mt-popover-item__checkbox .mt-field--checkbox {
  margin: 0;
}
.mt-popover-item__icon {
  margin-top: var(--scale-size-4);
  padding: 1px;
}
.mt-popover-item__icon--clickable {
  cursor: pointer;
}
.mt-popover-item__icon svg {
  width: var(--scale-size-14) !important;
  height: var(--scale-size-14) !important;
}
.mt-popover-item__label {
  margin-right: var(--scale-size-4);
}
.mt-popover-item__label, .mt-popover-item__contextual-detail, .mt-popover-item__shortcut {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  font-weight: var(--font-weight-medium);
}
.mt-popover-item__label--clickable, .mt-popover-item__contextual-detail--clickable, .mt-popover-item__shortcut--clickable {
  cursor: pointer;
}
.mt-popover-item__contextual-detail, .mt-popover-item__shortcut {
  color: var(--color-text-secondary-default);
  white-space: nowrap;
}
.mt-popover-item__switch {
  margin: var(--scale-size-4) 0 0 0;
  min-height: var(--scale-size-16);
}
.mt-popover-item__visibility svg {
  width: var(--scale-size-12) !important;
  height: var(--scale-size-8) !important;
}
.mt-popover-item__visibility #meteor-icon-kit__solid-eye-slash {
  width: var(--scale-size-14) !important;
  height: var(--scale-size-10) !important;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
}
.mt-popover-item__options-count {
  margin-right: var(--scale-size-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  font-weight: var(--font-weight-medium);
}
.mt-popover-item__options svg {
  width: 5px !important;
  height: var(--scale-size-8) !important;
}
.mt-popover-item__visibility, .mt-popover-item__options {
  cursor: pointer;
  padding-top: var(--scale-size-4);
  margin-top: var(--scale-size-4);
}
.mt-popover-item__meta-copy {
  color: var(--color-text-secondary-default);
  font-size: var(--font-size-2xs);
  line-height: var(--font-line-height-2xs);
  font-weight: var(--font-weight-medium);
}