@include component-rules($petals--link-component-name) {
  &:link {
    color: var($__petals--link-color, $petals--link-color);
    text-decoration: var($__petals--link-decoration, $petals--link-decoration);
    background-color: var($__petals--link-bg, $petals--link-bg);
  }

  &:visited {
    color: var($__petals--link-visited-color, $petals--link-visited-color);
    text-decoration: var($__petals--link-visited-decoration, $petals--link-visited-decoration);
    background-color: var($__petals--link-visited-bg, $petals--link-visited-bg);
  }

  &:hover {
    color: var($__petals--link-hover-color, $petals--link-hover-color);
    text-decoration: var($__petals--link-hover-decoration, $petals--link-hover-decoration);
    background-color: var($__petals--link-hover-bg, $petals--link-hover-bg);
  }

  &:active {
    color: var($__petals--link-active-color, $petals--link-active-color);
    text-decoration: var($__petals--link-active-decoration, $petals--link-active-decoration);
    background-color: var($__petals--link-active-bg, $petals--link-active-bg);
  }
}
