.link--underlined {
  text-decoration: none;
  font-weight: 700;
  line-height: 2;
  color: var(--color-on-background);
  padding: 0.56rem var(--rhyme-xxs);

  background-image: linear-gradient(var(--color-primary-light), var(--color-primary-light));
  background-size: 100% 0.96em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out,
              color 0.3s ease-in-out;
}

.link--underlined:hover,
.link--underlined:focus,
.link--underlined:active {
  background-size: 100% 100%;
}

.link-button {
  display: inline-block;
  padding: var(--rhyme-xxs) var(--rhyme-lg);
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  border-radius: var(--border-radius--sm, 5px);
  white-space: nowrap;
    
  box-shadow: 7px 7px 0 -1.5px var(--color-primary), 7px 7px 0 0 var(--color-on-primary);
    
  transition: all 250ms;
  }
    
.link-button--primary-on-primary:hover,
.link-button--primary-on-primary:active {
  transform: translateY(2px);
  transform: translateX(2px);
  box-shadow: 5px 5px 0 -1.5px var(--color-primary), 5px 5px 0 0 var(--color-on-primary);
}
    
.link-button--primary-on-primary {
  border-style: solid;
  border-width: var(--border-md);
  border-color: var(--color-on-primary);
  background-color: var(--color-on-primary);
  color: var(--color-primary);
}