[data-lk-component="card"] {
  display: block;
  overflow: hidden;
  position: relative;

  --local-offset-factor: calc(
    var(--largest-child-font-size) / var(--largest-child-line-height)
  ); /* The line height of the largest child */
  --largest-child-font-size: var(--body-font-size);
  --largest-child-line-height: var(--body-line-height);

  border-radius: var(--local-offset-factor);

  /* Modifies direct child text elements of the children slot (that way nested components like buttons
       don't inherit color blending props */
}

/* Other material handling (that doesn't need to be nested) */

[data-lk-card-variant="fill"] {
}

[data-lk-card-variant="outline"] {
  background-color: transparent;
  border: 1px solid var(--lk-outlinevariant);
}

[data-lk-card-variant="transparent"] {
  background-color: transparent;
  border: none;
}

/* For each scale factor, recalculate largest child font size and line height so that padding can adjust */

[data-lk-card-scale-factor="zero"] {
  padding: 0;
  border-radius: var(--lk-size-sm);
}

[data-lk-card-scale-factor="display1"] {
  --largest-child-font-size: var(--display1-font-size);
  --largest-child-line-height: var(--display1-line-height);
  --opticCorrectedPadding: calc(var(--display1-font-size) / var(--display1-line-height));
  border-radius: var(--local-offset-factor);
}

[data-lk-card-scale-factor="display2"] {
  --largest-child-font-size: var(--display2-font-size);
  --largest-child-line-height: var(--display2-line-height);
  --opticCorrectedPadding: calc(var(--display2-font-size) / var(--display2-line-height));
}

[data-lk-card-scale-factor="title1"] {
  --largest-child-font-size: var(--title1-font-size);
  --largest-child-line-height: var(--title1-line-height);
  --opticCorrectedPadding: calc(var(--title1-font-size) / var(--title1-line-height));
}

[data-lk-card-scale-factor="title2"] {
  --largest-child-font-size: var(--title2-font-size);
  --largest-child-line-height: var(--title2-line-height);
  --opticCorrectedPadding: calc(var(--title2-font-size) / var(--title2-line-height));
}

[data-lk-card-scale-factor="title3"] {
  --largest-child-font-size: var(--title3-font-size);
  --largest-child-line-height: var(--title3-line-height);
  --opticCorrectedPadding: calc(var(--title3-font-size) / var(--title3-line-height));
}

[data-lk-card-scale-factor="heading"] {
  --largest-child-font-size: var(--heading-font-size);
  --largest-child-line-height: var(--heading-line-height);
  --opticCorrectedPadding: calc(var(--heading-font-size) / var(--heading-line-height));
}

[data-lk-card-scale-factor="subheading"] {
  --largest-child-font-size: var(--subheading-font-size);
  --largest-child-line-height: var(--subheading-line-height);
  --opticCorrectedPadding: calc(var(--subheading-font-size) / var(--subheading-line-height));
}

[data-lk-card-scale-factor="body"] {
  --largest-child-font-size: var(--body-font-size);
  --largest-child-line-height: var(--body-line-height);
  --opticCorrectedPadding: calc(var(--body-font-size) / var(--body-line-height));
}

[data-lk-card-scale-factor="callout"] {
  --largest-child-font-size: var(--callout-font-size);
  --largest-child-line-height: var(--callout-line-height);
  --opticCorrectedPadding: calc(var(--callout-font-size) / var(--callout-line-height));
}

[data-lk-card-scale-factor="label"] {
  --largest-child-font-size: var(--label-font-size);
  --largest-child-line-height: var(--label-line-height);
  --opticCorrectedPadding: calc(var(--label-font-size) / var(--label-line-height));
}

[data-lk-card-scale-factor="caption"] {
  --largest-child-font-size: var(--caption-font-size);
  --largest-child-line-height: var(--caption-line-height);
  --opticCorrectedPadding: calc(var(--caption-font-size) / var(--caption-line-height));
}

[data-lk-card-scale-factor="capline"] {
  --largest-child-font-size: var(--capline-font-size);
  --largest-child-line-height: var(--capline-line-height);
  --opticCorrectedPadding: calc(var(--capline-font-size) / var(--capline-line-height));
}

[data-lk-card-material="flat"] {
  backdrop-filter: none;
}

.clickable {
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.clickable:hover {
  box-shadow: 0 0 0 2px var(--lk-primary, blue);
}

/* [data-lk-card-material="rubber"] { */
/* } */

/* Default padding behavior: equal on all sides */
[data-lk-card-element="padding-box"] {
  position: relative;
  z-index: 1;
  padding: var(--largest-child-font-size);
  height: 100%;
}

[data-lk-card-element="padding-box"].overflow-auto {
  position: relative;
  z-index: 1;
  padding: var(--largest-child-font-size);
  height: 100%;
  overflow: auto;
}

[data-lk-card-optical-correction="left"] {
  padding-left: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="right"] {
  padding-right: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="top"] {
  padding-top: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="bottom"] {
  padding-bottom: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="x"] {
  padding-left: var(--opticCorrectedPadding);
  padding-right: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="y"] {
  padding-top: var(--opticCorrectedPadding);
  padding-bottom: var(--opticCorrectedPadding);
}

[data-lk-card-optical-correction="all"] {
  padding: var(--opticCorrectedPadding);
}

@media (prefers-color-scheme: dark) {
  [data-lk-component="card"] {
    /* Special material handling */

    /* Global material component behaviors are handled in universal/lib/css/material.css. But here, we're adding case-specific rules. */
    &[data-lk-card-material="glass"] {
      /* Modifies direct child text elements of the children slot (that way nested components like buttons
       don't inherit color blending props */
      [data-lk-slot="children"] {
        mix-blend-mode: plus-lighter;
        color: var(--lk-onsurface);
      }
    }
  }
}

/* TODO: Consider adding a 'tint' prop which would let you combine frosted glass effects with a slight color */
