barbican-reset 3.36.0 → 3.40.0

package/scss/_variables.scss

@@ -1,19 +1,58 @@
 // Global CSS custom properties for the design system.
 // Defines all design tokens — colours, spacing, typography, layout, and more —
 // as CSS variables on the `:root` element so they are available throughout the cascade.
+
 :root {
-  // --- Border ---
+
+  // --- Background colours ---
+
+  --background-color-button-manage-order: transparent;
+  --background-color-button-manage-order-focus: var(--color-brand-generic-15-lighten);
+  --background-color-button-select-form: white;
+
+  --background-color-button-outline: white;
+  --background-color-card-membership: var(--color-black-50-lighten);
+
+  --background-color-toggle-checked: var(--color-status-success);
+  --background-color-toggle-unchecked: var(--color-black-50-lighten);
+  --background-color-toggle-before-checked: white;
+  --background-color-toggle-before-unchecked: white;
+
+  --background-color-button-select-form-focus: var(--color-black-60-lighten);
+  --background-color-form-select-link-focus: var(--color-black-5-lighten);
+
+  // --- Background images ---
+
+  --background-image-card-membership: none;
+
+  // --- Border colours ---
+
+  --border-color-button-manage-order-focus: var(--color-brand-generic-90-darken);
+  --border-color-toggle-checked: var(--color-status-success);
+  --border-color-toggle-unchecked: var(--color-black-50-lighten);
+  --border-color-card-membership: var(--color-card-membership-dark);
+
+  // --- Border radius ---
 
   --border-radius-sm: 0.25rem;
-  --border-radius-lg: 0.375rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+
+  --border-radius-card-membership-label: 0.9375rem;
+  --border-radius-toggle: calc(var(--height-toggle) * 0.5);
+
+  // --- Border widths ---
+
   --border-width-sm: 0.0625rem;
   --border-width-lg: 0.125rem;
   --border-width-xl: 0.25rem;
 
+  --border-width-toggle-before: var(--border-width-sm);
+
   // --- Box shadow ---
 
-  // Card box shadow. Uses `--padding-sm` for the blur radius.
-  --box-shadow-card: 0 0 var(--padding-sm) rgba(0, 0, 0, 0.125);
+  --box-shadow-card-membership: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.18);
 
   // --- Colours: black scale ---
 
@@ -36,6 +75,8 @@
   --color-brand-art: #e60077;
   // Art brand darkened 65%
   --color-brand-art-35-darken: color-mix(in oklab, var(--color-brand-art) 35%, black);
+  // Art brand darkened 50%
+  --color-brand-art-50-darken: color-mix(in oklab, var(--color-brand-art) 50%, black);
   // Art brand darkened 20%
   --color-brand-art-80-darken: color-mix(in oklab, var(--color-brand-art) 80%, black);
   // Art brand darkened 10%
@@ -57,6 +98,8 @@
   --color-brand-cinema: #20882a;
   // Cinema brand darkened 65%
   --color-brand-cinema-35-darken: color-mix(in oklab, var(--color-brand-cinema) 35%, black);
+  // Cinema brand darkened 50%
+  --color-brand-cinema-50-darken: color-mix(in oklab, var(--color-brand-cinema) 50%, black);
   // Cinema brand darkened 20%
   --color-brand-cinema-80-darken: color-mix(in oklab, var(--color-brand-cinema) 80%, black);
   // Cinema brand darkened 10%
@@ -78,6 +121,8 @@
   --color-brand-classical: #946f2e;
   // Classical brand darkened 65%
   --color-brand-classical-35-darken: color-mix(in oklab, var(--color-brand-classical) 35%, black);
+  // Classical brand darkened 50%
+  --color-brand-classical-50-darken: color-mix(in oklab, var(--color-brand-classical) 50%, black);
   // Classical brand darkened 20%
   --color-brand-classical-80-darken: color-mix(in oklab, var(--color-brand-classical) 80%, black);
   // Classical brand darkened 10%
@@ -99,6 +144,8 @@
   --color-brand-contemporary: #402f79;
   // Contemporary brand darkened 65%
   --color-brand-contemporary-35-darken: color-mix(in oklab, var(--color-brand-contemporary) 35%, black);
+  // Contemporary brand darkened 50%
+  --color-brand-contemporary-50-darken: color-mix(in oklab, var(--color-brand-contemporary) 50%, black);
   // Contemporary brand darkened 20%
   --color-brand-contemporary-80-darken: color-mix(in oklab, var(--color-brand-contemporary) 80%, black);
   // Contemporary brand darkened 10%
@@ -120,6 +167,8 @@
   --color-brand-generic: #d14900;
   // Generic brand darkened 65%
   --color-brand-generic-35-darken: color-mix(in oklab, var(--color-brand-generic) 35%, black);
+  // Generic brand darkened 50%
+  --color-brand-generic-50-darken: color-mix(in oklab, var(--color-brand-generic) 50%, black);
   // Generic brand darkened 20%
   --color-brand-generic-80-darken: color-mix(in oklab, var(--color-brand-generic) 80%, black);
   // Generic brand darkened 10%
@@ -141,6 +190,8 @@
   --color-brand-membership: #3173dd;
   // Membership brand darkened 65%
   --color-brand-membership-35-darken: color-mix(in oklab, var(--color-brand-membership) 35%, black);
+  // Membership brand darkened 50%
+  --color-brand-membership-50-darken: color-mix(in oklab, var(--color-brand-membership) 50%, black);
   // Membership brand darkened 20%
   --color-brand-membership-80-darken: color-mix(in oklab, var(--color-brand-membership) 80%, black);
   // Membership brand darkened 10%
@@ -162,6 +213,8 @@
   --color-brand-programme: var(--color-black-60-lighten);
   // Programme brand darkened 65%
   --color-brand-programme-35-darken: color-mix(in oklab, var(--color-brand-programme) 35%, black);
+  // Programme brand darkened 50%
+  --color-brand-programme-50-darken: color-mix(in oklab, var(--color-brand-programme) 50%, black);
   // Programme brand darkened 20%
   --color-brand-programme-80-darken: color-mix(in oklab, var(--color-brand-programme) 80%, black);
   // Programme brand darkened 10%
@@ -183,6 +236,8 @@
   --color-brand-shop: #13866f;
   // Shop brand darkened 65%
   --color-brand-shop-35-darken: color-mix(in oklab, var(--color-brand-shop) 35%, black);
+  // Shop brand darkened 50%
+  --color-brand-shop-50-darken: color-mix(in oklab, var(--color-brand-shop) 50%, black);
   // Shop brand darkened 20%
   --color-brand-shop-80-darken: color-mix(in oklab, var(--color-brand-shop) 80%, black);
   // Shop brand darkened 10%
@@ -204,6 +259,8 @@
   --color-brand-talks: #5778a2;
   // Talks brand darkened 65%
   --color-brand-talks-35-darken: color-mix(in oklab, var(--color-brand-talks) 35%, black);
+  // Talks brand darkened 50%
+  --color-brand-talks-50-darken: color-mix(in oklab, var(--color-brand-talks) 50%, black);
   // Talks brand darkened 20%
   --color-brand-talks-80-darken: color-mix(in oklab, var(--color-brand-talks) 80%, black);
   // Talks brand darkened 10%
@@ -225,6 +282,8 @@
   --color-brand-theatre: #017e9d;
   // Theatre brand darkened 65%
   --color-brand-theatre-35-darken: color-mix(in oklab, var(--color-brand-theatre) 35%, black);
+  // Theatre brand darkened 50%
+  --color-brand-theatre-50-darken: color-mix(in oklab, var(--color-brand-theatre) 50%, black);
   // Theatre brand darkened 20%
   --color-brand-theatre-80-darken: color-mix(in oklab, var(--color-brand-theatre) 80%, black);
   // Theatre brand darkened 10%
@@ -240,16 +299,67 @@
   // Theatre brand lightened 95%
   --color-brand-theatre-5-lighten: color-mix(in oklab, var(--color-brand-theatre) 5%, white);
 
+  // --- Colours: brand — Young Barbican ---
+
+  --color-brand-young-barbican-purple: #8205FF;
+  --color-brand-young-barbican-pink: #C030AC;
+  --color-brand-young-barbican-orange: #FE5A59;
+
+  --color-brand-young-barbican: var(--color-brand-young-barbican-purple);
+  // Young Barbican brand darkened 50%
+  --color-brand-young-barbican-50-darken: color-mix(in oklab, var(--color-brand-young-barbican) 50%, black);
+  // Young Barbican orange brand lightened 95%
+  --color-brand-young-barbican-orange-5-lighten: color-mix(in oklab, var(--color-brand-young-barbican-orange) 5%, white);
+
+  // --- Colours: button ---
+
+  --color-button-manage-order-focus: var(--color-brand-generic-90-darken);
+  --color-button-outline: var(--color-brand-generic);
+  --color-button-outline-secondary: var(--color-black-60-lighten);
+  --color-button-select-form: var(--color-black-60-lighten);
+  --color-button-select-form-focus: white;
+
+  // --- Colours: card ---
+
+  --color-card-membership: white;
+  --color-card-membership-dark: black;
+  --color-card-membership-light: blue;
+
   // --- Colours: donor ---
 
-  // Patron donor colour. Alias of `--color-black-50-lighten`.
+  --color-donor-member-plus: var(--color-brand-membership-35-darken);
+
   --color-donor-patron: var(--color-black-50-lighten);
-  // Patron donor light variant. Alias of `--color-black-25-lighten`.
-  --color-donor-patron-light: var(--color-black-25-lighten);
-  // Principle donor colour. Alias of `--color-brand-classical`.
-  --color-donor-principle: var(--color-brand-classical);
-  // Principle donor light variant. Alias of `--color-brand-classical-60-lighten`.
-  --color-donor-principle-light: var(--color-brand-classical-60-lighten);
+  // Patron donor darkened 50%
+  --color-donor-patron-50-darken: color-mix(in oklab, var(--color-donor-patron) 50%, black);
+  // Patron donor lightened 40%
+  --color-donor-patron-60-lighten: color-mix(in oklab, var(--color-donor-patron) 60%, white);
+  // Patron donor lightened 95%
+  --color-donor-patron-5-lighten: color-mix(in oklab, var(--color-donor-patron) 5%, white);
+
+  --color-donor-premier-patron: var(--color-donor-patron);
+  // Premier patron donor darkened 50%
+  --color-donor-premier-patron-50-darken: var(--color-donor-patron-50-darken);
+  // Premier patron donor lightened 40%
+  --color-donor-premier-patron-60-lighten: var(--color-donor-patron-60-lighten);
+  // Premier patron donor lightened 95%
+  --color-donor-premier-patron-5-lighten: var(--color-donor-patron-5-lighten);
+
+  --color-donor-principal-patron: var(--color-brand-classical);
+  // Principal patron donor darkened 50%
+  --color-donor-principal-patron-50-darken: var(--color-brand-classical-50-darken);
+  // Principal patron donor lightened 40%
+  --color-donor-principal-patron-60-lighten: var(--color-brand-classical-60-lighten);
+  // Principal patron donor lightened 95%
+  --color-donor-principal-patron-5-lighten: var(--color-brand-classical-5-lighten);
+
+  --color-donor-directors-circle: var(--color-donor-principal-patron);
+  // Directors circle donor darkened 50%
+  --color-donor-directors-circle-50-darken: var(--color-donor-principal-patron-50-darken);
+  // Directors circle donor lightened 40%
+  --color-donor-directors-circle-60-lighten: var(--color-donor-principal-patron-60-lighten);
+  // Directors circle donor lightened 95%
+  --color-donor-directors-circle-5-lighten: var(--color-donor-principal-patron-5-lighten);
 
   // --- Colours: design ---
 
@@ -258,6 +368,10 @@
   --color-design-supply: #ff0000;
   --color-design-system: #6b45a1;
 
+  // --- Colours: forms ---
+
+  --color-form-select-list: inherit;
+
   // --- Colours: mindsets ---
 
   --color-mindsets-addicts: #e6433a;
@@ -287,12 +401,6 @@
   // Success status lightened 60%
   --color-status-success-40-lighten: color-mix(in oklab, var(--color-status-success) 40%, white);
 
-  // --- Colours: Young Barbican ---
-
-  --color-youngbarbican-1: #8205FF;
-  --color-youngbarbican-2: #C030AC;
-  --color-youngbarbican-3: #FE5A59;
-
   // --- Columns (grid-template-columns) ---
 
   --columns-simple: auto 8rem;
@@ -326,10 +434,14 @@
   // Small font size 14px
   --font-size-sm: 0.875rem;
 
+  --font-size-card-membership: 0.9375rem;
+  --font-size-card-subtitle: var(--font-size-h4);
+  --font-size-card-subtitle-mobile: var(--font-size-h5);
+
   // --- Gaps ---
 
-  // Extra-small gap 8px
-  --gap-xs: 0.5rem;
+  // Extra-small gap 10px
+  --gap-xs: 0.625rem;
   // Small gap 12px
   --gap-sm: 0.75rem;
   // Medium gap 16px
@@ -339,6 +451,10 @@
   // Extra-large gap 32px
   --gap-xl: 2rem;
 
+  --gap-card-membership-details: 1.25rem;
+
+  --height-toggle: calc(var(--width-toggle-before) + calc(var(--margin-toggle-before) * 2) + calc(var(--border-width-toggle-before) * 2));
+
   // --- Line heights ---
 
   --line-height-xs: 1;
@@ -349,6 +465,28 @@
   // Fixed line height for button/menu items 38px
   --line-height-button-menu: 2.375rem;
 
+  // --- Gradients ---
+
+  --gradient-angle-membership: 110deg;
+
+  --gradient-member-plus: var(--color-donor-member-plus) 20%, var(--color-brand-membership) 70%;
+  --gradient-member-plus-sm: var(--gradient-member-plus);
+
+  --gradient-patron: var(--color-donor-patron) 55%, var(--color-donor-patron-60-lighten) 70%, var(--color-donor-patron) 85%;
+  --gradient-patron-sm: var(--color-donor-patron) 20%, var(--color-donor-patron-60-lighten) 35%, var(--color-donor-patron) 50%;
+
+  --gradient-premier-patron: var(--gradient-patron);
+  --gradient-premier-patron-sm: var(--gradient-patron-sm);
+
+  --gradient-principal-patron: var(--color-donor-principal-patron) 55%, var(--color-donor-principal-patron-60-lighten) 70%, var(--color-donor-principal-patron) 85%;
+  --gradient-principal-patron-sm: var(--color-donor-principal-patron) 20%, var(--color-donor-principal-patron-60-lighten) 35%, var(--color-donor-principal-patron) 50%;
+
+  --gradient-directors-circle: var(--gradient-principal-patron);
+  --gradient-directors-circle-sm: var(--gradient-principal-patron-sm);
+
+  --gradient-young-barbican: var(--color-brand-young-barbican-purple) 20%, var(--color-brand-young-barbican-pink) 50%, var(--color-brand-young-barbican-orange) 85%;
+  --gradient-young-barbican-sm: var(--gradient-young-barbican);
+
   // --- Margins ---
 
   // Extra-small margin 5px
@@ -366,11 +504,16 @@
   // 3× extra-large margin 40px
   --margin-xxxl: 2.5rem;
 
-  // Negative wrap offset for `--margin-xs`. Used to counteract child margins.
+  --margin-card-membership: var(--padding-card-sm);
+  --margin-toggle-before: 0.25rem;
+
+  // Negative wrap offsets. Used to counteract child margins.
   --margin-wrap-xs: calc(var(--margin-xs) * -1);
   --margin-wrap-sm: calc(var(--margin-sm) * -1);
   --margin-wrap-md: calc(var(--margin-md) * -1);
 
+  --max-width-card-membership: var(--width-layout-xs);
+
   // --- Minimum heights ---
 
   // Minimum button height 40px
@@ -382,6 +525,9 @@
 
   // --- Offsets & outlines ---
 
+  --outline-color-toggle-checked: var(--background-color-toggle-checked);
+  --outline-color-toggle-unchecked: var(--background-color-toggle-unchecked);
+
   // Navlink offset. Negative `--border-width-sm` to align active indicator flush with edge.
   --offset-navlink: calc(var(--border-width-sm) * -1);
   // Large outline inset -4px
@@ -422,11 +568,15 @@
   // Large responsive layout side padding 10%
   --padding-layout-lg: 10%;
 
+  --padding-card-membership: var(--padding-card-sm);
+
   // --- Scale ---
 
   // Click/press scale transform. Applied on active states to give tactile feedback.
   --scale-click: scale(0.98);
 
+  --stroke-qr-code: currentColor;
+
   // --- Widths ---
 
   // Standard column width 80px
@@ -443,6 +593,10 @@
   --width-layout-md: 60rem;
   // Large layout max-width 1200px
   --width-layout-lg: 75rem;
-  // QR code display width 112px
-  --width-qrcode: 7rem;
+  // QR code display width 120px
+  --width-qrcode: 7.5rem;
+
+  --width-select-form: 12.5rem;
+  --width-toggle: calc(calc(var(--width-toggle-before) * 2) + calc(var(--margin-toggle-before) * 2) + calc(var(--border-width-toggle-before) * 2));
+  --width-toggle-before: 1.25rem;
 }

package/scss/card/_membership-new.scss

@@ -2,36 +2,23 @@
 
 $colors: (
   "member": var(--color-brand-membership),
-  "member-plus": var(--color-brand-membership-35-darken),
+  "member-plus": var(--color-donor-member-plus),
   "patron": var(--color-donor-patron),
   "premier-patron": var(--color-donor-patron),
-  "principal-patron": var(--color-donor-principle),
-  "directors-circle": var(--color-donor-principle),
-  "young-barbican": var(--color-youngbarbican-1),
+  "principal-patron": var(--color-donor-principal-patron),
+  "directors-circle": var(--color-donor-principal-patron),
+  "young-barbican": var(--color-brand-young-barbican),
 );
 
 $gradients: (
-  "member-plus": linear-gradient(120deg, var(--color-brand-membership-35-darken) 20%, var(--color-brand-membership) 100%),
-  "patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
-  "premier-patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
-  "principal-patron": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
-  "directors-circle": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
-  "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
+  "member-plus": linear-gradient(var(--gradient-angle-membership), var(--gradient-member-plus)),
+  "patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-patron)),
+  "premier-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-premier-patron)),
+  "principal-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-principal-patron)),
+  "directors-circle": linear-gradient(var(--gradient-angle-membership), var(--gradient-directors-circle)),
+  "young-barbican": linear-gradient(var(--gradient-angle-membership), var(--gradient-young-barbican)),
 );
 
-.br-card.membership-new {
-  background-color: var(--color-black-60-lighten);
-  border-width: 0;
-  color: white;
-  width: 196px;
-}
-
-.br-card.membership-new+.br-card.membership-new {
-  @include small-up {
-    margin-top: 0;
-  }
-}
-
 @each $name, $value in $colors {
   .br-card.membership-new.#{$name} {
     background-color: #{$value};

package/scss/index.scss

@@ -11,7 +11,7 @@
 @use "br-form-label";
 @use "br-form-radio";
 @use "br-form-row";
-@use "br-form-select-link";
+@use "br-form-select";
 @use "br-form-textarea";
 @use "br-form-toggle";
 @use "br-form-update";
@@ -21,6 +21,7 @@
 @use "br-loader";
 @use "br-overlay";
 @use "br-promo";
+@use "br-qr-code";
 @use "br-select";
 @use "br-skiplink";
 @use "br-table-cell";

package/scss/mixins/_br-alert.scss

@@ -4,7 +4,7 @@
 
 @mixin br-alert-wrap--setup {
   padding: var(--padding-md) var(--padding-lg);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   border-width: var(--border-width-sm);
   border-style: solid;
 }

package/scss/mixins/_br-card.scss

@@ -7,7 +7,7 @@
 
 @mixin br-card--setup {
   border-color: var(--color-black-25-lighten);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   border-width: var(--border-width-sm);
   background-color: white;
   border-style: solid;

package/scss/mixins/_br-form-radio.scss

@@ -57,7 +57,7 @@
 
 @mixin br-form-radio--label {
   border-color: var(--color-black-25-lighten);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   border-width: var(--border-width-sm);
   padding: var(--padding-md);
   background-color: white;

package/scss/mixins/_content.scss

@@ -34,7 +34,7 @@
 }
 
 @mixin card-container {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   background-color: white;
   overflow: hidden;
 }

package/scss/mixins/_focus.scss

@@ -126,7 +126,7 @@
   outline-width: var(--border-width-lg);
   outline-color: currentColor;
   outline-style: solid;
-  border-radius: 50%;      
+  border-radius: 50%;
 
   path.cross {
     fill: white;

package/scss/mixins/_font-size.scss

@@ -1,9 +1,9 @@
 @use "../mixins/breakpoints" as *;
 
 @mixin font-size-subtitle {
-  font-size: var(--font-size-h5);
+  font-size: var(--font-size-card-subtitle);
 
-  @include medium-up {
-    font-size: var(--font-size-h4);
+  @include medium-down {
+    font-size: var(--font-size-card-subtitle-mobile);
   }
 }

package/scss/mixins/buttons/_custom.scss

@@ -8,14 +8,19 @@
 @use "slim" as *;
 @use "solid" as *;
 
+@use "custom/link" as *;
 @use "custom/outline-primary" as *;
 @use "custom/outline-secondary" as *;
 @use "custom/primary" as *;
 @use "custom/secondary" as *;
 
 @forward "custom/add-to-wallet";
+@forward "custom/edit-input";
+@forward "custom/exit";
 @forward "custom/exit-overlay";
+@forward "custom/exit-overlay-bg";
 @forward "custom/invisible";
+@forward "custom/link";
 @forward "custom/manage-order";
 @forward "custom/select-form";
 @forward "custom/outline-alert-neutral";
@@ -25,25 +30,7 @@
 @forward "custom/renew-membership";
 @forward "custom/secondary";
 @forward "custom/summary";
-
-@mixin link-button($color: inherit,
-  $background: transparent,
-  $padding: 0,
-  $line-height: false) {
-  background-color: $background;
-  text-decoration: underline;
-  vertical-align: baseline;
-  padding: $padding;
-  border-radius: 0;
-  font-weight: normal;
-  text-align: left;
-  color: $color;
-  border: none;
-
-  @if $line-height {
-    line-height: $line-height;
-  }
-}
+@forward "custom/voucher-amount";
 
 @mixin btn-returns {
   @include btn-outline-primary($border-width: var(--border-width-lg));
@@ -67,21 +54,6 @@
   @include outline-button($color: white, $background: var(--color-brand-generic), $border-width: var(--border-width-lg));
 }
 
-@mixin btn-edit-input {
-  @include outline-button($color: var(--color-black-50-lighten), $background: var(--color-black-10-lighten), $padding: var(--padding-sm) var(--padding-md));
-
-  & {
-    border-color: var(--color-black-25-lighten);
-    border-width: var(--border-width-sm);
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  @include focus {
-    border-color: var(--color-black-50-lighten);
-  }
-}
-
 @mixin btn-cinema {
   @include solid-button(var(--color-brand-cinema));
 }
@@ -98,46 +70,9 @@
   @include outline-button(var(--color-brand-cinema));
 }
 
-@mixin btn-remove {
-  @include solid-button($background: var(--color-black-60-lighten),
-    $padding: 0.625em,
-    $line-height: var(--line-height-md));
-}
-
-@mixin btn-link {
-  @include link-button($line-height: var(--line-height-md));
-
-  @include focus {
-    @include focus-tabs;
-  }
-}
-
-@mixin btn-video-help {
-  @include link-button($padding: 1.25em, $background: var(--color-black-5-lighten));
-  font-weight: bold;
-  width: 100%;
-
-  @include focus {
-    background-color: var(--color-black-50-lighten);
-    color: white;
-  }
-}
-
-@mixin btn-exit {
-  @include link-button;
-
-  svg {
-    display: block;
-  }
-
-  @include focus {
-    @include close-icon-focus;
-  }
-}
-
 @mixin btn-remove-ticket {
   @include small-down {
-    @include btn-remove;
+    @include btn-secondary;
     width: 100%;
   }
 
@@ -148,7 +83,7 @@
 
 @mixin btn-remove-gift {
   @include x-large-down {
-    @include btn-remove;
+    @include btn-secondary;
     width: 100%;
   }
 
@@ -163,8 +98,10 @@
 
 @mixin btn-cta {
   @include solid-button($background: var(--color-black-60-lighten));
-  // @include flex-button;
-  fill: white;
+
+  & {
+    fill: white;
+  }
 }
 
 @mixin btn-carousel {
@@ -205,8 +142,6 @@
     $margin: var(--margin-xs),
     $line-height: var(--line-height-lg));
 
-  // @include flex-button;
-
   vertical-align: middle;
   min-height: var(--min-height-button);
 
@@ -225,7 +160,6 @@
     $padding: 0 var(--padding-md),
     $margin: var(--margin-xs),
     $line-height: var(--line-height-lg));
-  // @include flex-button;
   vertical-align: middle;
   min-height: var(--min-height-button);
 
@@ -240,7 +174,6 @@
 
 @mixin btn-discover {
   @include outline-button(white, var(--color-black-60-lighten));
-  // @include flex-button;
 
   span {
     position: relative;
@@ -274,34 +207,28 @@
 
 @mixin btn-priority-row {
   @include btn-outline-primary;
-  // @include flex-button;
 }
 
 @mixin btn-login-to-book {
   @include btn-primary;
-  // @include flex-button;
 }
 
 @mixin btn-sold-out {
   @include btn-secondary;
-  // @include flex-button;
   pointer-events: none;
   min-width: initial;
 }
 
 @mixin btn-add-membership-to-basket {
   @include solid-button($background: var(--color-brand-membership));
-  // @include flex-button;
 }
 
 @mixin btn-remove-membership-from-basket {
   @include solid-button($background: var(--color-status-error));
-  // @include flex-button;
 }
 
 @mixin btn-additional-information {
   @include btn-outline-primary;
-  // @include flex-button;
 }
 
 @mixin btn-toggle-password {