@import './vars.import.css';

:root {
  /* Font */
  --polly-breadcrumbs-font-size: var(--polly-font-size--sm);
  --polly-breadcrumbs-font-weight: var(--polly-font-weight--regular);
  --polly-breadcrumbs-line-height: var(--polly-line-height--md);

  /* Links */
  --polly-breadcrumbs-link-colour: var(--polly-font-colour--light);
  --polly-breadcrumbs-link-colour--active: var(--polly-font-colour--dark);
  --polly-breadcrumbs-link-colour--hover: var(--polly-font-colour--dark);
  --polly-breadcrumbs-link-text-decoration: none;
  --polly-breadcrumbs-link-text-decoration--hover: none;

  /* Breadcrumbs */
  --polly-breadcrumbs-opacity: 1;
}

/* Breadcrumbs Component */
.articleBreadcrumb {
  align-self: stretch;
  padding: 10px;
  opacity: var(--polly-breadcrumbs-opacity);

  color: var(--polly-breadcrumbs-link-colour--active);
  font-family: var(--polly-font-family--base);
  font-size: var(--polly-breadcrumbs-font-size);
  font-style: normal;
  font-weight: var(--polly-breadcrumbs-font-weight);
  line-height: var(--polly-breadcrumbs-line-height);
  text-decoration: var(--polly-breadcrumbs-link-text-decoration);
}

.articleBreadcrumb a:hover {
  text-decoration: var(--polly-breadcrumbs-link-text-decoration--hover);
  color: var(--polly-breadcrumbs-link-colour--hover);
}