:host,
.ld-card {
  --ld-card-bg-col: var(--ld-col-wht);
  --ld-card-border-radius: var(--ld-br-l);
  --ld-card-padding: var(--ld-sp-32);

  appearance: none;
  border: none;
  box-sizing: border-box;
  background-color: var(--ld-card-bg-col);
  border-radius: var(--ld-card-border-radius);
  color: inherit;
  display: inline-grid;
  justify-items: flex-start;
  list-style: none;
  padding: var(--ld-card-padding);
  position: relative;
  text-decoration: none;

  &::before,
  &::after {
    content: '';
    border-radius: inherit;
    box-shadow: var(--ld-shadow-stacked);
    inset: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity var(--ld-transition-duration-normal) ease-out;
  }

  &::after {
    opacity: 0;
  }
}

slot {
  border-radius: inherit;
}

:host(.ld-card--sticky)::before,
.ld-card--sticky::before,
:host(.ld-card--interactive-sticky)::after,
.ld-card--interactive-sticky::after {
  box-shadow: var(--ld-shadow-sticky);
}
:host(.ld-card--hover)::before,
.ld-card--hover::before,
:host(.ld-card--interactive-hover)::after,
.ld-card--interactive-hover::after {
  box-shadow: var(--ld-shadow-hover);
}
:host(.ld-card--active)::before,
.ld-card--active::before,
:host(.ld-card--interactive-active)::after,
.ld-card--interactive-active::after {
  box-shadow: var(--ld-shadow-active);
}

.ld-card--interactive-stacked,
.ld-card--interactive-sticky,
.ld-card--interactive-hover,
.ld-card--interactive-active {
  &:hover,
  &:focus-within {
    :host(&)::before,
    &::before {
      opacity: 0;
    }
    :host(&)::after,
    &::after {
      opacity: 1;
    }
  }
}

.ld-card--sm {
  :host(&),
  & {
    --ld-card-padding: var(--ld-sp-16);
  }
}

.ld-card--zero {
  :host(&),
  & {
    --ld-card-padding: 0px;
  }
}
