@shopware-ag/meteor-component-library/dist/mt-select-result.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
 * ------------------------------------ */
.mt-select-result {
  padding: var(--scale-size-12) var(--scale-size-4);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  border-radius: 4px;
}
.mt-select-result .mt-select-result__result-item-preview {
  order: 1;
  margin-right: var(--scale-size-10);
  display: block;
}
.mt-select-result .mt-select-result__result-item-text {
  max-width: 100%;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary-default);
  order: 2;
}
.mt-select-result.is--active {
  background: var(--color-background-brand-default);
  color: var(--color-text-brand-default);
}
.mt-select-result.is--active .mt-select-result__result-item-text {
  color: var(--color-text-brand-default);
}
.mt-select-result .mt-select-result__result-item-description {
  width: 100%;
  color: #a3b3c2;
  order: 3;
  line-height: 14px;
  padding: 0 0 0 var(--scale-size-8);
}
.mt-select-result > .mt-icon {
  color: var(--color-icon-primary-default);
  margin-left: var(--scale-size-4);
  order: 4;
  justify-self: end;
}
.mt-select-result.is--description-bottom {
  grid-template-columns: 1fr auto;
}
.mt-select-result.is--description-bottom .mt-select-result__result-item-description {
  grid-column-start: 1;
  padding: var(--scale-size-8) 0 0;
  order: 3;
}
.mt-select-result.is--description-bottom .mt-icon {
  order: 2;
}
.mt-select-result.is--disabled {
  color: #a3b3c1;
}
.mt-select-result.is--disabled.is--active {
  background: #f0f2f5;
  color: #a3b3c1;
  cursor: default;
}
.mt-select-result.is--disabled .mt-highlight-text__highlight {
  color: #a3b3c1;
}
.mt-select-result.is--disabled .mt-select-result__result-item-text {
  color: #a3b3c1;
}
.mt-select-result:last-child {
  border-bottom: 0 none;
}
.mt-select-result .mt-select-result-appear-enter-active,
.mt-select-result .mt-select-result-appear-leave-active {
  transition: all ease-in-out 0.15s;
  transform: translateY(0);
}
.mt-select-result .mt-select-result-appear-enter,
.mt-select-result .mt-select-result-appear-leave-to {
  opacity: 0;
  transform: translateY(-15px);
}