diff --git a/src/components/ModalAddressMode.js b/src/components/ModalAddressMode.js
index 191cd200..424ffa10 100644
--- a/src/components/ModalAddressMode.js
+++ b/src/components/ModalAddressMode.js
@@ -11,6 +11,8 @@ import { t } from 'ttag';
 import { getGlobalWallet } from '../modules/wallet';
 import helpers from '../utils/helpers';
 import { ADDRESS_MODE } from '../constants';
+import RadioGroup from './Radio/RadioGroup';
+import PreferenceSaveButton from './PreferenceSaveButton';
 
 const LEARN_MORE_URL = 'https://docs.hathor.network/explanations/features/wallet-service/address-mode';
 
@@ -66,78 +68,53 @@ function ModalAddressMode({ currentMode, onSave, onClose }) {
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div className="modal-body" style={{ display: 'flex', flexDirection: 'column' }}>
-            <p style={{ marginBottom: 40 }}>
+          <div className="modal-body d-flex flex-column">
+            <p className="address-mode-intro">
               {t`You can set your wallet to `}<strong>{t`single or multi address mode`}</strong>{'.'}
               <br />
               {t`You can switch anytime in the settings.`}
             </p>
 
             <div>
-              <div
-                className={`address-mode-option ${selectedMode === ADDRESS_MODE.SINGLE ? 'address-mode-option--selected' : ''} ${isSingleDisabled ? 'address-mode-option--disabled' : ''}`}
-                onClick={() => !isSingleDisabled && setSelectedMode(ADDRESS_MODE.SINGLE)}
-              >
-                <div className="d-flex align-items-center mb-2" style={{ gap: '6px' }}>
-                  <input
-                    type="radio"
-                    name="addressMode"
-                    checked={selectedMode === ADDRESS_MODE.SINGLE}
-                    disabled={isSingleDisabled}
-                    onChange={() => setSelectedMode(ADDRESS_MODE.SINGLE)}
-                  />
-                  <strong className="address-mode-label">{t`Single Address`}</strong>
-                </div>
-                <p className="address-mode-description">
-                  {t`Your wallet will use only one address (index 0).`}
-                  <br />
-                  <span className="address-mode-hint">{t`Easier to manage and compatible with all dApps.`}</span>
-                </p>
-              </div>
+              <RadioGroup
+                name="addressMode"
+                value={selectedMode}
+                onChange={setSelectedMode}
+                options={[
+                  {
+                    value: ADDRESS_MODE.SINGLE,
+                    title: t`Single Address`,
+                    disabled: isSingleDisabled,
+                    description: t`Your wallet will use only one address (index 0).`,
+                    hint: t`Easier to manage and compatible with all dApps.`,
+                  },
+                  {
+                    value: ADDRESS_MODE.MULTI,
+                    title: t`Multi Address`,
+                    description: t`Your wallet will let you generate multiple addresses.`,
+                    hint: t`Useful for advanced users.`,
+                  },
+                ]}
+              />
 
-              <div>
-                <div
-                  className={`address-mode-option ${selectedMode === ADDRESS_MODE.MULTI ? 'address-mode-option--selected' : ''}`}
-                  onClick={() => setSelectedMode(ADDRESS_MODE.MULTI)}
-                >
-                  <div className="d-flex align-items-center mb-2" style={{ gap: '6px' }}>
-                    <input
-                      type="radio"
-                      name="addressMode"
-                      checked={selectedMode === ADDRESS_MODE.MULTI}
-                      onChange={() => setSelectedMode(ADDRESS_MODE.MULTI)}
-                    />
-                    <strong className="address-mode-label">{t`Multi Address`}</strong>
-                  </div>
-                  <p className="address-mode-description">
-                    {t`Your wallet will let you generate multiple addresses.`}
-                    <br />
-                    <span className="address-mode-hint">{t`Useful for advanced users.`}</span>
-                  </p>
+              {hasTxOutside && (
+                <div className="address-mode-alert">
+                  <i className="fa fa-exclamation-triangle" style={{ color: '#d97706' }}></i>
+                  <span>
+                    {t`You can't switch to single address mode because other addresses in your wallet are already in use.`}
+                    {' '}
+                    <a href="true" onClick={openLearnMore} style={{ textDecoration: 'underline', color: 'inherit' }}>{t`Learn more`}</a>{'.'}
+                  </span>
                 </div>
-
-                {hasTxOutside && (
-                  <div className="address-mode-alert">
-                    <i className="fa fa-exclamation-triangle" style={{ color: '#d97706' }}></i>
-                    <span>
-                      {t`You can't switch to single address mode because other addresses in your wallet are already in use.`}
-                      {' '}
-                      <a href="true" onClick={openLearnMore} style={{ textDecoration: 'underline', color: 'inherit' }}>{t`Learn more`}</a>{'.'}
-                    </span>
-                  </div>
-                )}
-              </div>
+              )}
             </div>
           </div>
-          <div className="modal-footer justify-content-center" style={{ borderTop: 'none', marginTop: 12 }}>
-            <button
-              type="button"
-              className={`address-mode-save-btn ${hasChanged && !loading ? 'address-mode-save-btn--active' : ''}`}
+          <div className="modal-footer justify-content-center border-top-0 address-mode-footer">
+            <PreferenceSaveButton
+              title={t`Save preferences`}
               disabled={!hasChanged || loading}
               onClick={handleSave}
-            >
-              {t`Save preferences`}
-            </button>
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/ModalAmountFormat.js b/src/components/ModalAmountFormat.js
index 7330d66e..7346bd57 100644
--- a/src/components/ModalAmountFormat.js
+++ b/src/components/ModalAmountFormat.js
@@ -10,6 +10,8 @@ import $ from 'jquery';
 import { t } from 'ttag';
 import { AMOUNT_FORMAT } from '../constants';
 import { compressAmountString } from '../utils/amount';
+import RadioGroup from './Radio/RadioGroup';
+import PreferenceSaveButton from './PreferenceSaveButton';
 
 const MODAL_ID = 'amountFormatModal';
 
@@ -40,27 +42,6 @@ function ModalAmountFormat({ currentFormat, onSave, onClose }) {
     return `${PREVIEW_EXPANDED} HTR`;
   };
 
-  const renderOption = ({ format, title, description, isDefault }) => (
-    <div className="amount-format-option" onClick={() => setSelectedFormat(format)}>
-      <input
-        type="radio"
-        id={`amountFormat-${format}`}
-        name="amountFormat"
-        checked={selectedFormat === format}
-        onChange={() => setSelectedFormat(format)}
-      />
-      <div className="amount-format-option-body">
-        <div className="amount-format-option-header">
-          <label className="amount-format-option-title" htmlFor={`amountFormat-${format}`}>
-            {title}
-          </label>
-          {isDefault && <span className="amount-format-tag">{t`Default`}</span>}
-        </div>
-        <p className="amount-format-option-description">{description}</p>
-      </div>
-    </div>
-  );
-
   return (
     <div className="modal fade amount-format-modal" id={MODAL_ID} tabIndex="-1" role="dialog" aria-labelledby={MODAL_ID} aria-hidden="true">
       <div className="modal-dialog" role="document">
@@ -76,21 +57,24 @@ function ModalAmountFormat({ currentFormat, onSave, onClose }) {
               {t`Choose how amounts are displayed across your wallet. You can change your default anytime.`}
             </p>
 
-            <div className="amount-format-card">
-              {renderOption({
-                format: AMOUNT_FORMAT.EXPANDED,
-                title: t`Expanded`,
-                description: t`Standard notation. Leading zeros are written out in full (ex: 0.0000005195).`,
-                isDefault: true,
-              })}
-              <hr className="amount-format-divider" />
-              {renderOption({
-                format: AMOUNT_FORMAT.COMPRESSED,
-                title: t`Compressed`,
-                description: t`Compresses leading zeros into a subscript count for shorter, easier-to-read small values (ex: 0.0₆5195).`,
-                isDefault: false,
-              })}
-            </div>
+            <RadioGroup
+              name="amountFormat"
+              value={selectedFormat}
+              onChange={setSelectedFormat}
+              options={[
+                {
+                  value: AMOUNT_FORMAT.EXPANDED,
+                  title: t`Expanded`,
+                  badge: t`Default`,
+                  description: t`Standard notation. Leading zeros are written out in full (ex: 0.0000005195).`,
+                },
+                {
+                  value: AMOUNT_FORMAT.COMPRESSED,
+                  title: t`Compressed`,
+                  description: t`Compresses leading zeros into a subscript count for shorter, easier-to-read small values (ex: 0.0₆5195).`,
+                },
+              ]}
+            />
 
             <p className="amount-format-preview-label">{t`PREVIEW`}</p>
             <div className="amount-format-preview">
@@ -99,14 +83,11 @@ function ModalAmountFormat({ currentFormat, onSave, onClose }) {
             </div>
           </div>
           <div className="modal-footer justify-content-center">
-            <button
-              type="button"
-              className={`amount-format-save-btn ${hasChanged ? 'amount-format-save-btn--active' : ''}`}
+            <PreferenceSaveButton
+              title={t`Save preferences`}
               disabled={!hasChanged}
               onClick={() => onSave(selectedFormat)}
-            >
-              {t`Save preferences`}
-            </button>
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/PreferenceSaveButton.js b/src/components/PreferenceSaveButton.js
new file mode 100644
index 00000000..eadb0725
--- /dev/null
+++ b/src/components/PreferenceSaveButton.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The primary save button shared by the preference modals. Renders only the
+ * button; the caller supplies its own container and spacing.
+ *
+ * @memberof Components
+ */
+function PreferenceSaveButton({ title, onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      className={`preference-save-btn ${disabled ? '' : 'preference-save-btn--active'}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {title}
+    </button>
+  );
+}
+
+PreferenceSaveButton.propTypes = {
+  title: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+PreferenceSaveButton.defaultProps = {
+  disabled: false,
+};
+
+export default PreferenceSaveButton;
diff --git a/src/components/Radio/RadioButton.js b/src/components/Radio/RadioButton.js
new file mode 100644
index 00000000..3e1ece89
--- /dev/null
+++ b/src/components/Radio/RadioButton.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The radio circle itself. A real input so keyboard and assistive tech work;
+ * `appearance: none` in SCSS replaces the native rendering.
+ *
+ * @memberof Components
+ */
+function RadioButton({ id, name, selected, disabled, onChange }) {
+  return (
+    <input
+      type="radio"
+      id={id}
+      name={name}
+      className="radio-button"
+      checked={selected}
+      disabled={disabled}
+      onChange={onChange}
+    />
+  );
+}
+
+RadioButton.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+};
+
+RadioButton.defaultProps = {
+  disabled: false,
+};
+
+export default RadioButton;
diff --git a/src/components/Radio/RadioGroup.js b/src/components/Radio/RadioGroup.js
new file mode 100644
index 00000000..650bb701
--- /dev/null
+++ b/src/components/Radio/RadioGroup.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RadioOption from './RadioOption';
+
+/**
+ * A bordered card grouping radio options, separated by dividers. Controlled:
+ * the caller owns the selected value and receives it back through onChange.
+ *
+ * @memberof Components
+ */
+function RadioGroup({ name, value, onChange, options }) {
+  return (
+    <div className="radio-group">
+      {options.map((option, index) => (
+        <React.Fragment key={option.value}>
+          {index > 0 && <hr className="radio-group-divider" />}
+          <RadioOption
+            name={name}
+            value={option.value}
+            selected={value === option.value}
+            disabled={option.disabled}
+            onSelect={onChange}
+            title={option.title}
+            badge={option.badge}
+            description={option.description}
+            hint={option.hint}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    title: PropTypes.node.isRequired,
+    description: PropTypes.node,
+    hint: PropTypes.node,
+    badge: PropTypes.node,
+    disabled: PropTypes.bool,
+  })).isRequired,
+};
+
+export default RadioGroup;
diff --git a/src/components/Radio/RadioOption.js b/src/components/Radio/RadioOption.js
new file mode 100644
index 00000000..42c64a28
--- /dev/null
+++ b/src/components/Radio/RadioOption.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RadioButton from './RadioButton';
+
+/**
+ * A selectable row: radio circle, a title row carrying an optional badge pill,
+ * an optional description and an optional muted italic hint.
+ *
+ * @memberof Components
+ */
+function RadioOption({ name, value, selected, disabled, onSelect, title, badge, description, hint }) {
+  const inputId = `${name}-${value}`;
+  const handleSelect = () => {
+    if (!disabled) {
+      onSelect(value);
+    }
+  };
+
+  const renderBadge = () => {
+    if (!badge) {
+      return null;
+    }
+    return <span className="radio-option-badge">{badge}</span>;
+  };
+
+  const renderDescription = () => {
+    if (!description) {
+      return null;
+    }
+    return <p className="radio-option-description">{description}</p>;
+  };
+
+  const renderHint = () => {
+    if (!hint) {
+      return null;
+    }
+    return <span className="radio-option-hint">{hint}</span>;
+  };
+
+  return (
+    <div
+      className={`radio-option ${disabled ? 'radio-option--disabled' : ''}`}
+      onClick={handleSelect}
+    >
+      <RadioButton
+        id={inputId}
+        name={name}
+        selected={selected}
+        disabled={disabled}
+        onChange={handleSelect}
+      />
+      <div className="radio-option-body">
+        <div className="radio-option-header">
+          <label className="radio-option-title" htmlFor={inputId}>{title}</label>
+          {renderBadge()}
+        </div>
+        {renderDescription()}
+        {renderHint()}
+      </div>
+    </div>
+  );
+}
+
+RadioOption.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+  onSelect: PropTypes.func.isRequired,
+  title: PropTypes.node.isRequired,
+  badge: PropTypes.node,
+  description: PropTypes.node,
+  hint: PropTypes.node,
+};
+
+RadioOption.defaultProps = {
+  disabled: false,
+  badge: null,
+  description: null,
+  hint: null,
+};
+
+export default RadioOption;
diff --git a/src/components/Radio/index.js b/src/components/Radio/index.js
new file mode 100644
index 00000000..c6a8e96f
--- /dev/null
+++ b/src/components/Radio/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as RadioButton } from './RadioButton';
+export { default as RadioOption } from './RadioOption';
+export { default as RadioGroup } from './RadioGroup';
diff --git a/src/index.module.scss b/src/index.module.scss
index 71846993..2f0ab59e 100644
--- a/src/index.module.scss
+++ b/src/index.module.scss
@@ -1210,82 +1210,155 @@ div .nc-token-balance:not(:last-child) {
   }
 }
 
-/* Address Mode modal */
-.address-mode {
-  &-option {
-    background: #f7f7f7;
-    border-radius: 16px;
-    padding: 24px 16px;
-    margin-bottom: 16px;
-
-    input[type="radio"] {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 24px;
-      height: 24px;
-      border: 2px solid #c4c4c4;
-      border-radius: 50%;
-      margin: 0;
-      cursor: pointer;
-      position: relative;
-      flex-shrink: 0;
-
-      &:checked {
-        border-color: $purpleHathor;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 12px;
-          height: 12px;
-          border-radius: 50%;
-          background: $purpleHathor;
-        }
-      }
-    }
+/* Shared radio selector, used by the preference modals */
+.radio-group {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 24px 16px;
 
-    &--disabled {
-      input[type="radio"] {
-        border-color: #e0e0e0;
-        cursor: default;
-      }
+  &-divider {
+    margin: 24px 0;
+    border-top: 1px solid #e5e7eb;
+  }
+}
 
-      .address-mode-label {
-        color: #c4c4c4;
-        cursor: default;
-      }
+.radio-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  cursor: pointer;
 
-      .address-mode-description {
-        color: #b0b0b0;
-      }
+  &--disabled {
+    cursor: default;
 
-      .address-mode-hint {
-        color: #b0b0b0;
-        font-style: normal;
-      }
+    .radio-option-title {
+      color: #c4c4c4;
+      cursor: default;
+    }
+
+    .radio-option-description,
+    .radio-option-hint {
+      color: #b0b0b0;
+    }
+
+    .radio-option-hint {
+      font-style: normal;
     }
   }
 
-  &-label {
-    color: $purpleHathor;
-    font-size: 14px;
+  &-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    color: #000;
+    margin-bottom: 4px;
     cursor: pointer;
   }
 
   &-description {
     font-size: 12px;
-    margin-bottom: 0;
     line-height: 20px;
+    color: #979797;
+    margin-bottom: 0;
   }
 
   &-hint {
+    font-size: 12px;
+    line-height: 20px;
     font-style: italic;
     color: #57606a;
   }
 
+  &-badge {
+    background: #f2f3f5;
+    border-radius: 8px;
+    width: 69px;
+    height: 23px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #6b7280;
+    text-align: center;
+    flex-shrink: 0;
+    padding: 2px 0;
+  }
+}
+
+.radio-button {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 26px;
+  height: 26px;
+  border: 2px solid #c4c4c4;
+  border-radius: 50%;
+  margin: 0;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+
+  &:checked {
+    border-color: $purpleHathor;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: $purpleHathor;
+    }
+  }
+
+  &:disabled {
+    border-color: #e0e0e0;
+    cursor: default;
+  }
+}
+
+.preference-save-btn {
+  background: #e5e5e5;
+  border: none;
+  border-radius: 8px;
+  padding: 16px;
+  width: 226px;
+  color: #b0b0b0;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  cursor: default;
+
+  &--active {
+    background: $purpleHathor;
+    color: white;
+    cursor: pointer;
+
+    &:hover {
+      background: $purpleHathorHover;
+    }
+  }
+}
+
+/* Address Mode modal */
+.address-mode {
+  &-intro {
+    margin-bottom: 40px;
+  }
+
   &-alert {
     background: rgba(217, 119, 6, 0.2);
     border-radius: 8px;
@@ -1297,26 +1370,8 @@ div .nc-token-balance:not(:last-child) {
     line-height: 20px;
   }
 
-  &-save-btn {
-    background: #e5e5e5;
-    border: none;
-    border-radius: 8px;
-    padding: 16px;
-    width: 185px;
-    color: #b0b0b0;
-    font-weight: 600;
-    font-size: 14px;
-    cursor: default;
-
-    &--active {
-      background: $purpleHathor;
-      color: white;
-      cursor: pointer;
-
-      &:hover {
-        background: $purpleHathorHover;
-      }
-    }
+  &-footer {
+    margin-top: 12px;
   }
 }
 
@@ -1341,95 +1396,6 @@ div .nc-token-balance:not(:last-child) {
     margin-bottom: 24px;
   }
 
-  &-card {
-    background: #fff;
-    border: 1px solid #e5e7eb;
-    border-radius: 16px;
-    padding: 24px 16px;
-  }
-
-  &-divider {
-    margin: 24px 0;
-    border-top: 1px solid #e5e7eb;
-  }
-
-  &-option {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    cursor: pointer;
-
-    input[type=radio] {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 26px;
-      height: 26px;
-      border: 2px solid #c4c4c4;
-      border-radius: 50%;
-      margin: 0;
-      cursor: pointer;
-      position: relative;
-      flex-shrink: 0;
-
-      &:checked {
-        border-color: $purpleHathor;
-
-        &::after {
-          content: "";
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 13px;
-          height: 13px;
-          border-radius: 50%;
-          background: $purpleHathor;
-        }
-      }
-    }
-
-    &-body {
-      flex: 1;
-      min-width: 0;
-    }
-
-    &-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 8px;
-    }
-
-    &-title {
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 20px;
-      color: #000;
-      margin-bottom: 4px;
-      cursor: pointer;
-    }
-
-    &-description {
-      font-size: 12px;
-      line-height: 20px;
-      color: #979797;
-      margin-bottom: 0;
-    }
-  }
-
-  &-tag {
-    background: #f2f3f5;
-    border-radius: 8px;
-    width: 69px;
-    height: 23px;
-    font-size: 12px;
-    line-height: 20px;
-    color: #6b7280;
-    text-align: center;
-    flex-shrink: 0;
-    padding: 2px 0;
-  }
-
   &-preview-label {
     font-size: 14px;
     font-weight: 600;
@@ -1463,27 +1429,4 @@ div .nc-token-balance:not(:last-child) {
       overflow-wrap: anywhere;
     }
   }
-
-  &-save-btn {
-    background: #e5e5e5;
-    border: none;
-    border-radius: 8px;
-    padding: 16px;
-    width: 226px;
-    color: #b0b0b0;
-    font-weight: 600;
-    font-size: 14px;
-    text-transform: uppercase;
-    cursor: default;
-
-    &--active {
-      background: $purpleHathor;
-      color: white;
-      cursor: pointer;
-
-      &:hover {
-        background: $purpleHathorHover;
-      }
-    }
-  }
 }