/* Note: .cta- is the default. Don't forget the minus! It isolates the link / buttom from child elements e.g. .cta_lbl */
/* Do not add margins, use a container if required */
/* Colour is unopinionated */

[class^="cta-"] {
  /* cta properties never change */
  padding: 0 12px 0 16px;
  display: inline-block;
  font: normal 16px/37px boldfont, sans-serif;
  border: 2px solid transparent;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  outline: 0 solid transparent;
  white-space: nowrap;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
button[class^="cta-"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

[class^="cta-"]:focus {
  outline: 0 solid transparent;
}

[class^="cta_lbl"] {
  display: inline-block;
  padding: 0;
  margin: 0;
  line-height: 1.3; /* distance between descenders and underline */
  border: 0 solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: border-bottom-color .3s ease-out;
}

a:hover [class^="cta_lbl"],
a:focus [class^="cta_lbl"],
button:hover [class^="cta_lbl"],
button:focus [class^="cta_lbl"] {
  border-bottom-color: currentColor;
}


[class^="cta"] svg {
  display: inline-block;
  width: 1.25em;
  height: 1.5em;
  vertical-align: text-bottom;
  fill: currentColor;
}



/* DDL - Inline links - color is opinionated to Tesco blue */

[class^="lnk-nrml"],
[class^="lnk-nrml"]:visited {
  font-family: regularfont, sans-serif;
  font-weight: normal;
  color: #00539f;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 83, 159, 1);
  transition: border-color .3s ease-out, color .3s ease-out;
}
[class^="lnk-nrml"]:hover,
[class^="lnk-nrml"]:focus {
  color: #008dc8;
  border-bottom-color: rgba(0, 141, 200, 0);
  outline: 0 solid;
}

[class^="lnk-bld"],
[class^="lnk-bld"]:visited {
  font-family: boldfont, sans-serif;
  font-weight: normal;
  color: #00539f;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 141, 200, 0);
  transition: border-color .3s ease-out, color .3s ease-out;
}
[class^="lnk-bld"]:hover,
[class^="lnk-bld"]:focus {
  color: #008dc8;
  border-bottom-color: rgba(0, 141, 200, 1);
  outline: 0 solid;
}