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

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

/**
 * @hotfix fixes a bug in safari which leads to disappearing cards
 */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.mt-card[data-v-4055cf93] {
      transform: translateZ(0);
}
}
}
.mt-card {
&[data-v-4055cf93] {
  max-width: 60rem;
  margin: 0 auto var(--scale-size-40);
  position: relative;
  background: var(--color-elevation-surface-raised);
  border: 1px solid var(--color-border-secondary-default);
  border-radius: var(--border-radius-card); /* Added here */
}
&:not(:has(.mt-card__tabs:empty)) .mt-card__header[data-v-4055cf93] {
    border-bottom: none;
}
}
.mt-card--future-remove-default-margin[data-v-4055cf93] {
  margin-block-end: 0;
}
.mt-card__content {
&[data-v-4055cf93] {
  --mt-card-content-padding: var(--scale-size-24);
  --mt-inset-block-start: var(--mt-card-content-padding);
  --mt-inset-block-end: var(--mt-card-content-padding);
  --mt-inset-inline-start: var(--mt-card-content-padding);
  --mt-inset-inline-end: var(--mt-card-content-padding);

  display: flow-root;
  flex-basis: 100%;
  padding: var(--mt-card-content-padding);
  background-clip: padding-box;
  position: relative;
  color: var(--color-text-primary-default);
}
&[data-v-4055cf93] > :where(h1, h2, h3, h4, h5, h6) {
    font-weight: normal;
}
& > h1[data-v-4055cf93] {
    font-size: 1.5rem;
}
& > h2[data-v-4055cf93] {
    font-size: 1.375rem;
}
& > h3[data-v-4055cf93] {
    font-size: 1.25rem;
}
&[data-v-4055cf93] > :where(h4, h5, h6) {
    font-size: 1.125rem;
}
& a.mt-card__quick-link {
&[data-v-4055cf93] {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 0.375rem;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-brand-default);
    font-size: 0.875rem;
}
&[data-v-4055cf93]:hover {
      color: var(--color-text-brand-hover);
}
}
}
.mt-card--has-footer {
& .mt-card__content[data-v-4055cf93] {
    border: none;
    border-radius: var(--border-radius-none);
}
}

/* @depracated v4.0.0 - will be removed without replacement */
.mt-card--large {
&[data-v-4055cf93] {
  max-width: 83.125rem;
}
& .mt-card__title[data-v-4055cf93],
  & .mt-card__subtitle[data-v-4055cf93] {
    width: auto;
    position: relative;
    top: 0;
    left: 0;
    text-align: left;
}
}
.mt-card--future-ignore-max-width[data-v-4055cf93] {
  max-width: none;
  margin-inline: 0;
}
.mt-card__titles[data-v-4055cf93] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mt-card__titles--has-inheritance-toggle {
&[data-v-4055cf93] {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: var(--scale-size-4);
  grid-template-areas:
    "inheritance title"
    "subtitle subtitle";
}
& .mt-card__subtitle[data-v-4055cf93] {
    grid-column: 1 / -1;
}
}
.mt-card--is-inherited {
&[data-v-4055cf93] {
  border-color: var(--color-border-accent-default);
}
& .mt-card__title[data-v-4055cf93] {
    color: var(--color-text-accent-default);
}
& .mt-card__inheritance-toggle[data-v-4055cf93] {
    color: var(--color-icon-accent-default);
}
}
.mt-card--grid {
& .mt-card__content {
&[data-v-4055cf93] {
    display: grid;
    padding: 0;
}
& .mt-grid[data-v-4055cf93] {
      border-top: none;
}
}
}
.mt-card__header[data-v-4055cf93] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--scale-size-12);
  padding: var(--scale-size-24);
  border-bottom: 1px solid var(--color-border-secondary-default);
}
.mt-card__title[data-v-4055cf93] {
  margin: 0;
}
.mt-card__toolbar {
&[data-v-4055cf93] {
  display: flex;
  flex-basis: auto;
  gap: var(--scale-size-8);
  padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24);
}
&[data-v-4055cf93]:empty {
    display: none;
}
}
.mt-card__avatar {
&[data-v-4055cf93] {
  overflow: hidden;
  border-radius: var(--border-radius-xs);
  width: var(--scale-size-40);
  height: var(--scale-size-40);
}
& img[data-v-4055cf93] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
&[data-v-4055cf93]:empty {
    display: none;
}
}
.mt-card__inheritance-toggle {
&[data-v-4055cf93] {
  cursor: pointer;
  outline-offset: 2px;
  outline-color: var(--color-border-brand-default);
  color: var(--color-icon-primary-default);
}
&[data-v-4055cf93]:focus-visible {
    outline: 2px solid var(--color-border-brand-default);
    outline-offset: 2px;
    border-radius: var(--border-radius-button);
}
}
.mt-card__titles-right-slot[data-v-4055cf93] {
  color: var(--color-text-primary-default);
  margin-left: auto;
}
.mt-card__footer {
&[data-v-4055cf93] {
  --mt-card-footer-padding: 1.5rem;

  --mt-inset-block-start: var(--mt-card-footer-padding);
  --mt-inset-block-end: var(--mt-card-footer-padding);
  --mt-inset-inline-start: var(--mt-card-footer-padding);
  --mt-inset-inline-end: var(--mt-card-footer-padding);

  display: flex;
  padding: var(--mt-card-footer-padding);
  color: var(--color-text-secondary-default);
}
&[data-v-4055cf93]:empty {
    display: none;
}
}