Extending danger button styling (#1280)

## What's Changed?

- Added tertiary danger button styles

![Danger
danger](https://media4.giphy.com/media/YAlhwn67KT76E/giphy.gif?cid=6104955eirkur0p4gn96o0fyyjdrq6kzn0l17cwwqu26ojny&ep=v1_gifs_translate&rid=giphy.gif&ct=g)

related to
RaspberryPiFoundation/digital-editor-issues#948

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Tertiary danger button styles (#1280)
+
 ### Fixed
 
 - Plugin sidebar panel rerendering (#1279)

src/assets/stylesheets/Button.scss

@@ -227,6 +227,23 @@
       border: 2px solid transparent;
       outline: 3px solid $rpf-brand-raspberry;
     }
+
+    &.btn--tertiary {
+      background-color: inherit;
+      color: var(--rpf-button-tertiary-danger-text-color);
+
+      svg {
+        fill: var(--rpf-button-tertiary-danger-text-color);
+      }
+
+      &:hover {
+        background-color: var(--rpf-button-tertiary-danger-background-color-hover);
+      }
+
+      &:active {
+        background-color: var(--rpf-button-tertiary-danger-background-color-active);
+      }
+    }
   }
 
   &--small {

src/assets/stylesheets/index.scss

@@ -96,6 +96,10 @@ code {
     --rpf-button-secondary-text-color: var(--rpf-white);
 
     --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
+
+    --rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
+    --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
+    --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
   }
 
   .rpf-button--secondary {
@@ -123,6 +127,10 @@ code {
 
   --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
 
+  --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
+  --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
+  --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
+
   .rpf-button--secondary {
     border-color: var(--rpf-teal-800);
   }