:root {
  --icon-font-color: #23262a;
  --icon-container-height: 110px;
  --icon-size: 43px;
  --icon-background-size: 63px;
  --icon-card-width: 300px;
  --icon-card-height: 320px;
}

.card {
  width: var(--icon-card-width);
  min-height: var(--icon-card-height);
  height: fit-content;
  background-color: var(--ds-color-surface-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: var(--ds-border-radius-lg);
  border: 1px solid var(--ds-color-neutral-border-subtle);
  position: relative;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-4);
  text-align: left;
  font-weight: normal;
}

.content button {
  width: 100%;
}

.link {
  padding: var(--ds-size-0);
  display: block;
  height: 100%;
}

.editIcon {
  padding: var(--ds-size-0);
  position: absolute;
  border-radius: var(--ds-border-radius-md);
  right: var(--ds-size-1);
  top: var(--ds-size-1);
  height: var(--ds-size-14);
  width: var(--ds-size-14);
}

.iconContainer {
  padding: var(--ds-size-1);
  height: var(--icon-container-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.iconBackground {
  height: var(--icon-background-size);
  width: var(--icon-background-size);
  transform: rotate(45deg);
  margin: var(--ds-size-0) auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBackground svg,
.iconBackground img {
  transform: rotate(-45deg);
  height: var(--icon-size);
  width: var(--icon-size);
  color: var(--ds-color-accent-text-default);
}

.blue {
  background-color: var(--ds-color-accent-surface-tinted);
  color: var(--icon-font-color);
}

.red {
  background-color: var(--ds-color-danger-surface-tinted);
  color: var(--icon-font-color);
}

.green {
  background-color: var(--ds-color-success-surface-tinted);
  color: var(--icon-font-color);
}

.grey {
  background-color: var(--ds-color-neutral-surface-tinted);
  color: var(--icon-font-color);
}

.yellow {
  background-color: var(--ds-color-warning-surface-tinted);
  color: var(--icon-font-color);
}

.title {
  letter-spacing: var(--ds-size-0);
}
