.md-card-wrapper {
  --local-normal-background-color: var(--mds-color-theme-background-secondary-normal);
  --local-hover-background-color: var(--mds-color-theme-background-secondary-hover);
  --local-active-background-color: var(--mds-color-theme-background-secondary-active);
  --local-border-color: transparent;

  border: var(--md-globals-border-clear);
  outline: none !important;
  color: var(--mds-color-theme-text-primary-normal); //overriding legacy styles sheet
  width: 100%;
  cursor: pointer;
  display: flex;
  margin: 0.25rem;
  overflow: hidden !important;
  padding: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;

  &[data-color='success'] {
    --local-normal-background-color: var(--mds-color-theme-background-alert-success-normal);
    --local-hover-background-color: var(--mds-color-theme-background-alert-success-hover);
    --local-active-background-color: var(--mds-color-theme-background-alert-success-active);
  }

  &[data-color='transparent'] {
    --local-normal-background-color: var(--mds-color-theme-background-primary-ghost);
    --local-hover-background-color: var(--mds-color-theme-background-primary-hover);
    --local-active-background-color: var(--mds-color-theme-background-primary-active);
  }

  &[data-static='true'] {
    --local-hover-background-color: var(--local-normal-background-color);
    --local-active-background-color: var(--local-normal-background-color);

    cursor: auto;
  }

  &[data-disabled='true'] {
    --local-normal-background-color: var(--mds-color-theme-background-primary-ghost);
    --local-hover-background-color: var(--mds-color-theme-background-primary-ghost);
    --local-active-background-color: var(--mds-color-theme-background-primary-ghost);

    cursor: auto;
  }

  &:not([data-outline='true']) {
    --local-border-color: transparent;
  }

  &[data-outline='true'] {
    --local-border-color: var(--mds-color-theme-outline-primary-disabled);
  }

  box-shadow: inset 0 0 0 0.125rem var(--local-border-color);
  background-color: var(--local-normal-background-color);

  &:hover {
    background-color: var(--local-hover-background-color);
  }

  &:active {
    background-color: var(--local-active-background-color);
  }

  &[data-height='auto'] {
    height: fit-content;
  }

  &[data-height='tiny'] {
    height: 1.875rem;
  }

  &[data-height='small'] {
    height: 3.125rem;
  }

  &[data-height='medium'] {
    height: 4.875rem;
  }

  &[data-height='large'] {
    height: 8.375rem;
  }

  &[data-rounding='1'] {
    border-radius: 0.25rem;
  }

  &[data-rounding='2'] {
    border-radius: 0.5rem;
  }
}