/*
 * Reusable OPC rich-text link list.
 * Required markup: .to-opc-link-list containing a heading and plain links.
 */
#snackys-tpl .to-opc-link-list {
  width: 100%;
  margin-top: var(--spacing-12);
  color: var(--color-primary-100);
  font-family: var(--font-family-base);
}

#snackys-tpl .to-opc-link-list h2,
#snackys-tpl .to-opc-link-list h3 {
  margin: 0 0 var(--spacing-8);
  color: var(--color-primary-100);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-heading);
}

#snackys-tpl .to-opc-link-list > p {
  margin: 0;
}

#snackys-tpl .to-opc-link-list > a,
#snackys-tpl .to-opc-link-list > p > a {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  margin: 0 0 var(--spacing-2);
  padding: 8px 52px 8px 16px;
  overflow: hidden;
  color: var(--color-primary-100) !important;
  font-family: var(--font-family-base);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  text-decoration: none !important;
  text-overflow: ellipsis;
  background: var(--color-white);
  border: 2px solid var(--color-tertiary-75);
  border-radius: var(--border-radius-sm);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

#snackys-tpl .to-opc-link-list > a::after,
#snackys-tpl .to-opc-link-list > p > a::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 25px;
  height: 25px;
  background-color: currentColor;
  content: '';
  transform: translateY(-50%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

#snackys-tpl .to-opc-link-list > a:hover,
#snackys-tpl .to-opc-link-list > a:focus-visible,
#snackys-tpl .to-opc-link-list > p > a:hover,
#snackys-tpl .to-opc-link-list > p > a:focus-visible {
  color: var(--color-white) !important;
  background: var(--color-primary-100);
  border-color: var(--color-primary-100);
  outline: 0;
}

#snackys-tpl .to-opc-link-list > a:last-child,
#snackys-tpl .to-opc-link-list > p:last-child > a {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  #snackys-tpl .to-opc-link-list h2,
  #snackys-tpl .to-opc-link-list h3 {
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-h5);
  }

  #snackys-tpl .to-opc-link-list > a,
  #snackys-tpl .to-opc-link-list > p > a {
    min-height: 44px;
    padding-left: 12px;
  }
}