.mds-link {
    /* Set the primary color of the component */
    --color-primary: rgb(var(--label-green-04));
    --icon-color-primary: var(--color-primary);
    --icon-bg-primary: rgb(var(--label-green-10));
    /* Set the secondary color of the component */
    --color-secondary: rgb(var(--label-orange-04));
    --icon-color-secondary: var(--color-secondary);
    --icon-bg-secondary: rgb(var(--label-orange-10));
    line-height: 1;
  }
  .mds-link .link {
    display: inline-flex;
    align-items: start;
    vertical-align: top;
    line-height: 1;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .mds-link .arrow {
    margin-left: 0.75rem;
    height: 1rem;
    width: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .mds-link .arrow--left {
    margin-left: 0;
    margin-right: 0.75rem;
  }
  .mds-link .link--primary {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }
  .mds-link .link--primary:hover {
    color: var(--color-primary);
  }
  .mds-link .link--primary:hover .arrow--primary {
    fill: var(--color-primary);
  }
  .mds-link .arrow--primary.arrow--on-hover {
    background: var(--icon-bg-primary);
  }
  .mds-link .link--secondary {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
    color: var(--color-secondary);
  }
  .mds-link .link--secondary:hover {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
  .mds-link .link--secondary:hover .text {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }
  .mds-link .link--secondary.link--arrow-on-hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
  .mds-link .link--secondary.link--arrow-on-hover .text {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }
  .mds-link .link--secondary.link--arrow-on-hover:hover {
    color: var(--color-secondary);
  }
  .mds-link .link--secondary.link--arrow-on-hover .arrow--secondary.arrow--on-hover {
    font-size: 19px;
    line-height: 12px;
    text-indent: -4px;
  }
  .mds-link .link--secondary.link--arrow-on-hover:hover .arrow--secondary.arrow--on-hover {
    fill: var(--color-secondary);
    background: var(--icon-bg-secondary);
  }
  .mds-link .arrow--secondary {
    fill: var(--color-secondary);
  }
  .mds-link .arrow--secondary.arrow--on-hover {
    background: var(--icon-bg-secondary);
  }
  .mds-link .link--arrow-on-hover:hover .arrow--on-hover {
    --tw-translate-x: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }
  .mds-link .arrow--on-hover {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    height: 0.75rem;
    width: 0.75rem;
    --tw-translate-x: -0.375rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    padding: 0.375rem;
    opacity: 0;
  }
  .mds-link .text {
    display: inline-flex;
    align-items: center;
    /*line-height: var(--icon-height);*/
  }