@layer repui.components {
  :where(.rui-card) {
    box-sizing: border-box;
    position: relative;

    min-inline-size: 0;
    min-block-size: 0;

    /*
     * Внешний узел всегда оставляет overlay-пространство видимым.
     * Будущий card_overlay сможет пересекать рамку Card.
     */
    overflow: visible;
  }

  :where(.rui-card[data-width="content"]) {
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  :where(.rui-card[data-width="full"]) {
    inline-size: 100%;
  }

  :where(.rui-card[data-height="content"]) {
    block-size: auto;
  }

  :where(.rui-card[data-height="full"]) {
    block-size: 100%;
  }

  :where(.rui-card__surface) {
    box-sizing: border-box;

    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;

    color: var(--rui-card-foreground);
    background: var(--rui-card-background);
    border: var(--rui-card-border);
    border-radius: var(--rui-card-radius);
    box-shadow: var(--rui-card-shadow);

    transition:
      background-color var(--rui-card-transition),
      border-color var(--rui-card-transition),
      box-shadow var(--rui-card-transition);

    /*
     * Surface обрезает внутренний контент по radius.
     * Overlay останется снаружи Surface и не будет обрезан.
     */
    overflow: hidden;
  }

  :where(.rui-card[data-height="full"] > .rui-card__surface) {
    block-size: 100%;
  }

  /*
   * Card без секций.
   */
  :where(.rui-card__content) {
    box-sizing: border-box;
    padding: var(--rui-card-padding);

    min-inline-size: 0;
    min-block-size: 0;
  }

  :where(
    .rui-card[data-height="full"][data-sections="false"]
    > .rui-card__surface
  ) {
    display: flex;
    flex-direction: column;
  }

  :where(
    .rui-card[data-height="full"][data-sections="false"]
    .rui-card__content
  ) {
    flex: 1 1 auto;
  }

  :where(
    .rui-card[data-sections="false"][data-overflow="visible"]
    .rui-card__content
  ) {
    overflow: visible;
  }

  :where(
    .rui-card[data-sections="false"][data-overflow="auto"]
    .rui-card__content
  ) {
    overflow: auto;
  }

  :where(
    .rui-card[data-sections="false"][data-overflow="hidden"]
    .rui-card__content
  ) {
    overflow: hidden;
  }

  /*
   * Card с Header / Body / Footer.
   */
  :where(.rui-card__sections) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
  }

  :where(
    .rui-card[data-height="full"]
    .rui-card__sections
  ) {
    block-size: 100%;
  }

  :where(.rui-card__header) {
    box-sizing: border-box;
    flex: 0 0 auto;

    min-inline-size: 0;
    padding: var(--rui-card-header-padding);
  }

  :where(.rui-card__body) {
    box-sizing: border-box;
    flex: 1 1 auto;

    min-inline-size: 0;
    min-block-size: 0;
    padding: var(--rui-card-body-padding);
  }

  :where(.rui-card__footer) {
    box-sizing: border-box;
    flex: 0 0 auto;

    min-inline-size: 0;
    padding: var(--rui-card-footer-padding);
  }

  :where(.rui-card__header + .rui-card__body) {
    border-block-start:
      1px solid var(--rui-card-divider);
  }

  :where(.rui-card__body + .rui-card__footer) {
    border-block-start:
      1px solid var(--rui-card-divider);
  }

  :where(.rui-card__header + .rui-card__footer) {
    border-block-start:
      1px solid var(--rui-card-divider);
  }

  :where(
    .rui-card[data-sections="true"][data-overflow="visible"]
    .rui-card__body
  ) {
    overflow: visible;
  }

  :where(
    .rui-card[data-sections="true"][data-overflow="auto"]
    .rui-card__body
  ) {
    overflow: auto;
  }

  :where(
    .rui-card[data-sections="true"][data-overflow="hidden"]
    .rui-card__body
  ) {
    overflow: hidden;
  }

  :where(.rui-card__content > :first-child),
  :where(.rui-card__header > :first-child),
  :where(.rui-card__body > :first-child),
  :where(.rui-card__footer > :first-child) {
    margin-block-start: 0;
  }

  :where(.rui-card__content > :last-child),
  :where(.rui-card__header > :last-child),
  :where(.rui-card__body > :last-child),
  :where(.rui-card__footer > :last-child) {
    margin-block-end: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.rui-card__surface) {
      transition: none;
    }
  }
}