@ozen-ui/kit/__inner__/cjs/components/ListCardItem/ListCardItem.css

React component library

.ListCardItem {
  --list-card-item-background-color: var(--list-card-item-background-color-base);
  --list-card-item-border-color: var(--list-card-item-border-color-base);
  display: flex;
  gap: var(--list-card-item-gap);
  background-color: var(--list-card-item-background-color);
  transition: background-color var(--transition-default), border-color var(--transition-default);
  padding-inline: var(--list-card-item-inline-padding);
  padding-block: var(--list-card-item-inline-padding);
}

  .ListCardItem_interactive:not(.ListCardItem_ignoreHover):hover {
    --list-card-item-background-color: var(--list-card-item-background-color-hover);
    --list-card-item-border-color: var(--list-card-item-border-color-hover);
  }

  .ListCardItem_interactive:not(.ListCardItem_ignoreHover):active {
    --list-card-item-background-color: var(--list-card-item-background-color-pressed);
    --list-card-item-border-color: var(--list-card-item-border-color-pressed);
  }

  .ListCardItem_interactive {
    cursor: pointer;
  }

  .ListCardItem_withBorder {
    border: 1px solid;
    border-color: var(--list-card-item-border-color);
  }

  .ListCardItem_variant_onPage.ListCardItem_size_xs {
      --list-card-item-inline-padding: var(--spacing-xs);
      --list-card-item-block-padding: var(--spacing-xs);
    }

  .ListCardItem_variant_onPage.ListCardItem_size_s {
      --list-card-item-inline-padding: var(--spacing-s);
      --list-card-item-block-padding: var(--spacing-s);
    }

  .ListCardItem_variant_onPage.ListCardItem_size_m {
      --list-card-item-inline-padding: 20px;
      --list-card-item-block-padding: 20px;
    }

  .ListCardItem_variant_onPage.ListCardItem_size_l {
      --list-card-item-inline-padding: var(--spacing-m);
      --list-card-item-block-padding: var(--spacing-m);
    }

  .ListCardItem_variant_list.ListCardItem_size_xs {
      --list-card-item-inline-padding: var(--spacing-2xs);
      --list-card-item-block-padding: var(--spacing-3xs);
    }

  .ListCardItem_variant_list.ListCardItem_size_s {
      --list-card-item-inline-padding: var(--spacing-xs);
      --list-card-item-block-padding: var(--spacing-2xs);
    }

  .ListCardItem_variant_list.ListCardItem_size_m {
      --list-card-item-inline-padding: var(--spacing-xs);
      --list-card-item-block-padding: var(--spacing-xs);
    }

  .ListCardItem_variant_list.ListCardItem_size_l {
      --list-card-item-inline-padding: var(--spacing-s);
      --list-card-item-block-padding: var(--spacing-s);
    }

  .ListCardItem_size_xs {
    --list-card-item-gap: var(--spacing-2xs);
  }

  .ListCardItem_size_s {
    --list-card-item-gap: var(--spacing-xs);
  }

  .ListCardItem_size_m {
    --list-card-item-gap: var(--spacing-xs);
  }

  .ListCardItem_size_l {
    --list-card-item-gap: var(--spacing-s);
  }

  .ListCardItem-Leading {
    flex-shrink: 0;
  }

  .ListCardItem-Main {
    display: flex;
    flex: 1;
    gap: var(--list-card-item-gap);
    overflow: hidden;
  }

  .ListCardItem-Center {
    flex: var(--list-card-item-center-grow) 0 0;
    overflow: hidden;
  }

  .ListCardItem-Trailing {
    display: flex;
    flex: var(--list-card-item-trailing-grow) 0 0;
    justify-content: flex-end;
    overflow: hidden;
  }

  .ListCardItem-Controls {
    flex-shrink: 0;
  }