@conduction/components/lib/components/card/downloadCard/DownloadCard.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  /* --conduction-download-card-background-color: #ffffff; */
  --conduction-download-card-title-color: #000000;
  --conduction-download-card-title-font-size: 20px;
  --conduction-download-card-title-font-weight: bold;
  /* --conduction-download-card-title-font-family: ; */
  --conduction-download-card-title-margin-inline-end: var(--skeleton-size-sm);

  --conduction-download-card-border-width: 1px;
  --conduction-download-card-border-style: solid;
  --conduction-download-card-border-color: var(--skeleton-color-grey-2);
  --conduction-download-card-border-radius: var(--skeleton-border-radius-md);

  --conduction-download-card-padding-inline-end: 14px;
  --conduction-download-card-padding-inline-start: 14px;
  --conduction-download-card-padding-block-end: 14px;
  --conduction-download-card-padding-block-start: 14px;

  --conduction-download-card-icon-gap: 8px;
}

.container {
  background-color: var(--conduction-download-card-background-color, var(--conduction-card-wrapper-background-color));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-width: var(--conduction-download-card-border-width, var(--conduction-card-wrapper-border-width));
  border-style: var(--conduction-download-card-border-style, var(--conduction-card-wrapper-border-style));
  border-color: var(--conduction-download-card-border-color, var(--conduction-card-wrapper-border-color));
  border-radius: var(--conduction-download-card-border-radius, --conduction-card-wrapper-border-radius);
  padding-inline-start: var(--conduction-download-card-padding-inline-start);
  padding-inline-end: var(--conduction-download-card-padding-inline-end);
  padding-block-start: var(--conduction-download-card-padding-block-start);
  padding-block-end: var(--conduction-download-card-padding-block-end);
}

.title {
  color: var(--conduction-download-card-title-color) !important;
  font-size: var(--conduction-download-card-title-font-size) !important;
  font-weight: var(--conduction-download-card-title-font-weight) !important;
  font-family: var(--conduction-download-card-title-font-family) !important;
  margin-inline-end: var(--conduction-download-card-title-margin-inline-end) !important;
  word-break: break-word;
}

.content {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.icon {
  margin-inline-end: var(--conduction-download-card-icon-gap);
  color: var(--conduction-download-card-icon-color);
}

.link {
  display: inherit;
}

.link:hover {
  cursor: pointer;
}