.clickable {
  cursor: pointer;
}

.custom-text-primary {
  color: var(--color-primary)
}

.custom-text-secondary {
  color: var(--color-secondary)
}

.custom-text-tertiary {
  color: var(--color-tertiary)
}

.custom-text-accent {
  color: var(--color-accent)
}

.custom-text-info {
  color: var(--color-info)
}

.custom-text-success {
  color: var(--color-success)
}

.custom-text-warning {
  color: var(--color-warning)
}

.custom-text-danger {
  color: var(--color-danger)
}

.custom-text-light {
  color: var(--color-light)
}

.custom-text-dark {
  color: var(--color-dark)
}

.custom-bg-primary {
  background-color: var(--color-primary)
}

.custom-bg-secondary {
  background-color: var(--color-secondary)
}

.custom-bg-tertiary {
  background-color: var(--color-tertiary)
}

.custom-bg-accent {
  background-color: var(--color-accent)
}

.custom-bg-info {
  background-color: var(--color-info)
}

.custom-bg-success {
  background-color: var(--color-success)
}

.custom-bg-warning {
  background-color: var(--color-warning)
}

.custom-bg-danger {
  background-color: var(--color-danger)
}

.custom-bg-light {
  background-color: var(--color-light)
}

.custom-bg-dark {
  background-color: var(--color-dark)
}

.custom-bg-transparent {
  background-color: transparent;
}


.custom-border-primary {
  border-color: var(--color-primary);
  --bs-border-color: var(--color-primary);
}

.custom-border-secondary {
  border-color: var(--color-secondary);
  --bs-border-color: var(--color-secondary);
}

.custom-border-tertiary {
  border-color: var(--color-tertiary);
  --bs-border-color: var(--color-tertiary);
}

.custom-border-accent {
  border-color: var(--color-accent);
  --bs-border-color: var(--color-accent);
}

.custom-border-info {
  border-color: var(--color-info);
  --bs-border-color: var(--color-info);
}

.custom-border-success {
  border-color: var(--color-success);
  --bs-border-color: var(--color-success);
}

.custom-border-warning {
  border-color: var(--color-warning);
  --bs-border-color: var(--color-warning);
}

.custom-border-danger {
  border-color: var(--color-danger);
  --bs-border-color: var(--color-danger);
}

.custom-border-light {
  border-color: var(--color-light);
  --bs-border-color: var(--color-light);
}

.custom-border-dark {
  border-color: var(--color-dark);
  --bs-border-color: var(--color-dark);
}

.link.primary,
.link.primary:visited,
.link.primary:hover {
  color: var(--color-primary);
}

.link.secondary,
.link.secondary:visited,
.link.secondary:hover {
  color: var(--color-secondary);
}

.link.tertiary,
.link.tertiary:visited,
.link.tertiary:hover {
  color: var(--color-tertiary);
}

.link.light,
.link.light:visited,
.link.light:hover {
  color: var(--color-light);
}

.image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.image.portrait {
  display: block;
  width: 100%;
  aspect-ratio: unset;
  height: auto;
  object-fit: cover;
}

.image.square {
  aspect-ratio: 1;
}

/* Object-fit */

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

.object-fit-fill {
  object-fit: fill;
}

.text-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
}
.artifact-icon {
  max-width: 75%;
  max-height: 75%;
}