@charset "utf-8";

[class*="btn--icon"] .plann-btn__inner { padding: 0px 1rem; }

[class*="btn--icon"] .plann-btn__inner .plann-btn__label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); margin: -1px; white-space: nowrap; }

[class*="btn--icon"].plann-btn--small .plann-btn__inner { padding: 0px 0.5rem; }

[class*="btn--icon"].plann-btn--xsmall .plann-btn__inner { padding: 0px 0.25rem; min-height: 2rem; }

[class*="btn--icon"].plann-btn--xsmall .plann-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.plann-btn { position: relative; font-size: 0.875rem; background: none; border: 0px; padding: 0px; line-height: 1.42857; font-weight: 700; text-align: center; display: inline-flex; border-radius: 64px; cursor: pointer; outline: 0px; vertical-align: top; --background: tokens.$colour-interactive-primary-bg-default; --background-hover: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0)); --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255)); --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146)); --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)); color: var(--foreground); text-decoration: none; }

.plann-btn .plann-btn__inner { box-shadow: var(--box-shadow); background: var(--background); }

.plann-btn:hover .plann-btn__inner { background: var(--background-hover); box-shadow: var(--box-shadow-hover); }

.plann-btn:active .plann-btn__inner { background: var(--background-press); box-shadow: var(--box-shadow-press); }

.plann-btn:hover, .plann-btn:active, .plann-btn:focus { text-decoration: none; color: var(--foreground); }

.plann-btn .plann-svg-icon { flex-shrink: 0; }

.plann-btn:disabled { cursor: default; }

.plann-btn:disabled .plann-btn__inner { background-color: var(--disabled-background); color: var(--disabled-foreground); box-shadow: none; }

.plann-btn__inner { border-radius: 64px; display: inline-flex; justify-content: center; align-items: center; min-height: 3.5rem; padding: 0px 2rem; width: 100%; box-sizing: border-box; transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

.plann-btn:active:not(:disabled) .plann-btn__inner { transform: scale(0.97); }

.plann-leading-icon .plann-btn__inner { padding-inline-start: 1.5rem; }

.plann-trailing-icon .plann-btn__inner { flex-direction: row-reverse; padding-inline-end: 1.5rem; }

@media (forced-colors: active) {
  .plann-btn__inner { border: 1px solid transparent; }
  .plann-btn:disabled .plann-btn__inner { color: graytext; border-color: graytext; }
}

.plann-btn--icon-primary, .plann-btn--primary { --background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17)); --background-hover: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0)); }

.plann-btn--icon-emphasised, .plann-btn--emphasised { --background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); --background-hover: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147)); --background-press: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147)); }

.plann-btn--icon-secondary, .plann-btn--secondary { --background: none; --background-hover: none; --box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); --background-press: rgba(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204), .5); }

.plann-btn--icon-emphasised-inverse, .plann-btn--emphasised-inverse, .plann-btn--icon-primary-inverse, .plann-btn--primary-inverse { --background: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255)); --background-hover: rgb(var(--colour-interactive-subtle-bg-hover, 245, 245, 245)); --background-press: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223)); }

.plann-btn--icon-secondary-inverse, .plann-btn--secondary-inverse { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), .1); --box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-1, 255, 255, 255)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-neutral-1, 255, 255, 255)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-neutral-1, 255, 255, 255)); }

.plann-btn--icon-tertiary-inverse, .plann-btn--tertiary-inverse { --background: transparent; --background-hover: rgba(var(--colour-neutral-1, 255, 255, 255), .15); --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), .3); --disabled-background: transparent; --disabled-foreground: rgba(var(--colour-interactive-disabled-1, 204, 204, 204), .15); }

.plann-btn--danger { --background: rgb(var(--colour-interactive-destructive-bg-default, 224, 7, 81)); --background-hover: rgb(var(--colour-interactive-destructive-bg-hover, 204, 0, 61)); --background-press: rgb(var(--colour-interactive-destructive-bg-pressed, 184, 0, 41)); }

.plann-btn--icon-tertiary, .plann-btn--tertiary { --background: transparent; --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223)); --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204)); --disabled-background: transparent; --disabled-foreground: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)); }

.plann-btn--icon-image-overlay, .plann-btn--image-overlay { --background: rgba(var(--colour-static-black, 17, 17, 17), .75); --background-hover: rgba(var(--colour-static-black, 17, 17, 17), .85); --background-press: rgba(var(--colour-static-black, 17, 17, 17), .95); }

.plann-btn.plann-btn--static-colour.plann-btn--primary, .plann-btn.plann-btn--static-colour.plann-btn--icon-primary { --background: rgb(var(--colour-interactive-static-primary-bg-default, 17, 17, 17)); --background-hover: rgb(var(--colour-interactive-static-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-static-primary-bg-pressed, 0, 0, 0)); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: rgba(var(--colour-static-black, 17, 17, 17), .15); }

.plann-btn.plann-btn--static-colour.plann-btn--secondary, .plann-btn.plann-btn--static-colour.plann-btn--icon-secondary { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204), .5); --box-shadow: inset 0 0 0 1px rgb(var(--colour-static-black, 17, 17, 17)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-static-black, 17, 17, 17)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-static-black, 17, 17, 17)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: rgba(var(--colour-static-black, 17, 17, 17), .15); }

.plann-btn.plann-btn--static-colour.plann-btn--tertiary, .plann-btn.plann-btn--static-colour.plann-btn--icon-tertiary { --background: transparent; --background-hover: rgb(var(--colour-interactive-static-secondary-bg-hover, 223, 223, 223)); --background-press: rgb(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: transparent; }

.plann-btn.plann-btn--static-colour.plann-btn--icon-secondary-inverse, .plann-btn.plann-btn--static-colour.plann-btn--secondary-inverse { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-static-white, 255, 255, 255), .1); --box-shadow: inset 0 0 0 1px rgb(var(--colour-static-white, 255, 255, 255)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-static-white, 255, 255, 255)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-static-white, 255, 255, 255)); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); --disabled-background: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.plann-btn.plann-btn--static-colour.plann-btn--icon-emphasised-inverse, .plann-btn.plann-btn--static-colour.plann-btn--icon-primary-inverse, .plann-btn.plann-btn--static-colour.plann-btn--primary-inverse, .plann-btn.plann-btn--static-colour.plann-btn--emphasised-inverse { --background: rgb(var(--colour-static-white, 255, 255, 255)); --background-hover: rgb(var(--colour-static-light-grey, 245, 245, 245)); --background-press: rgb(var(--colour-static-grey, 223, 223, 223)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); --disabled-background: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.plann-btn.plann-btn--static-colour.plann-btn--icon-tertiary-inverse, .plann-btn.plann-btn--static-colour.plann-btn--tertiary-inverse { --background: transparent; --background-hover: rgba(var(--colour-static-white, 255, 255, 255), .15); --background-press: rgba(var(--colour-static-white, 255, 255, 255), .3); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.plann-btn--icon-emphasised-inverse, .plann-btn--emphasised-inverse, .plann-btn--icon-primary-inverse, .plann-btn--primary-inverse, .plann-btn--icon-secondary, .plann-btn--secondary, .plann-btn--icon-tertiary, .plann-btn--tertiary { --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.plann-btn--icon-secondary-inverse, .plann-btn--secondary-inverse, .plann-btn--icon-tertiary-inverse, .plann-btn--tertiary-inverse, .plann-btn--icon-primary, .plann-btn--primary { --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255)); }

.plann-btn--icon-image-overlay, .plann-btn--icon-emphasised, .plann-btn--danger, .plann-btn--emphasised, .plann-btn--image-overlay { --foreground: rgb(var(--colour-static-white, 255, 255, 255)); }

.plann-btn .plann-btn__loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -160%); display: inline-block; width: 0px; height: 0px; border: 0.25rem solid; border-radius: 64px; animation: 0.7s ease 0s infinite normal none running btn-loader; opacity: 0; visibility: hidden; text-indent: -9999px; overflow: hidden; transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

@keyframes btn-loader { 
  0%, 100% { transform: translate(-50%, -160%); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translate(-50%, 20%); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
}

.plann-btn--loading { pointer-events: none; }

.plann-btn--loading .plann-btn__loader { opacity: 1; visibility: visible; }

.plann-btn--loading .plann-svg-icon, .plann-btn--loading .plann-btn__label { transform: translateY(50%); opacity: 0; visibility: hidden; }

.plann-btn--xsmall { font-size: 0.75rem; line-height: 1.33333; }

.plann-btn--xsmall .plann-btn__inner { min-height: 2rem; padding: 0px 1rem; }

.plann-btn--xsmall .plann-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.plann-btn--xsmall.plann-leading-icon .plann-btn__inner { padding-inline-start: 0.75rem; }

.plann-btn--xsmall.plann-trailing-icon .plann-btn__inner { padding-inline-end: 0.75rem; }

.plann-btn--xsmall.plann-leading-icon .plann-svg-icon { margin-inline-end: 0.25rem; }

.plann-btn--xsmall.plann-trailing-icon .plann-svg-icon { margin-inline-start: 0.25rem; }

.plann-btn--small { font-size: 0.75rem; line-height: 1.33333; }

.plann-btn--small .plann-btn__inner { min-height: 2.5rem; padding: 0px 1.5rem; }

.plann-btn--small .plann-btn__inner::after { content: ""; position: absolute; inset: -0.125rem; }

.plann-btn--small.plann-leading-icon .plann-btn__inner { padding-inline-start: 1rem; }

.plann-btn--small.plann-trailing-icon .plann-btn__inner { padding-inline-end: 1rem; }

.plann-btn--expanding.plann-leading-icon .plann-btn__inner, .plann-btn--expanding.plann-trailing-icon .plann-btn__inner, .plann-btn--expanding .plann-btn__inner { transition-property: opacity, transform, padding; padding: 0px 1rem; }

.plann-btn--expanding.plann-btn--small .plann-btn__inner { padding: 0px 0.5rem; }

.plann-btn--expanding.plann-btn--xsmall .plann-btn__icon { margin: 0px; }

.plann-btn--expanding.plann-btn--xsmall .plann-btn__inner { padding: 0px 0.25rem; min-height: 2rem; }

.plann-btn--expanding.plann-btn--xsmall .plann-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.plann-btn--expanding .plann-btn__icon { transition: margin-inline-end 0.25s ease-in-out; margin: 0px; }

.plann-btn--expanding .plann-btn__inner .plann-btn__label { max-width: 0px; white-space: nowrap; overflow: hidden; transition: max-width 0.25s ease-in-out; transform-origin: left center; position: static; width: auto; height: auto; margin: 0px; clip: initial; }

.plann-btn--expanding:hover .plann-btn__inner .plann-btn__label, .plann-btn--expanding:focus-visible .plann-btn__inner .plann-btn__label { max-width: 12.5rem; }

.plann-btn--expanding:hover.plann-leading-icon .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-leading-icon .plann-btn__inner { padding-inline: 1.5rem 2rem; }

.plann-btn--expanding:hover.plann-trailing-icon .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-trailing-icon .plann-btn__inner { flex-direction: row-reverse; padding-inline: 2rem 1.5rem; }

.plann-btn--expanding:hover.plann-leading-icon .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-leading-icon .plann-btn__icon { margin-inline-end: 0.5rem; }

.plann-btn--expanding:hover.plann-trailing-icon .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-trailing-icon .plann-btn__icon { margin-inline-start: 0.5rem; }

.plann-btn--expanding:hover.plann-leading-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-leading-icon.plann-btn--small .plann-btn__inner { padding-inline: 1rem 1.5rem; }

.plann-btn--expanding:hover.plann-trailing-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-trailing-icon.plann-btn--small .plann-btn__inner { padding-inline: 1.5rem 1rem; }

.plann-btn--expanding:hover.plann-leading-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-leading-icon.plann-btn--xsmall .plann-btn__inner { padding-inline: 0.75rem 1rem; }

.plann-btn--expanding:hover.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner { padding-inline: 1rem 0.75rem; }

.plann-btn--expanding:hover.plann-leading-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-leading-icon.plann-btn--xsmall .plann-btn__icon { margin-inline-end: 0.25rem; }

.plann-btn--expanding:hover.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon { margin-inline-start: 0.25rem; }

@media (hover: none) {
  .plann-btn--expanding.plann-leading-icon:hover .plann-btn__inner, .plann-btn--expanding.plann-trailing-icon:hover .plann-btn__inner { padding: 0px 1rem; }
  .plann-btn--expanding.plann-leading-icon:hover .plann-btn__inner .plann-btn__label, .plann-btn--expanding.plann-trailing-icon:hover .plann-btn__inner .plann-btn__label { max-width: 0px; }
  .plann-btn--expanding.plann-leading-icon:hover .plann-btn__icon, .plann-btn--expanding.plann-trailing-icon:hover .plann-btn__icon { margin: 0px; }
  .plann-btn--expanding.plann-leading-icon.plann-btn--small:hover .plann-btn__inner, .plann-btn--expanding.plann-trailing-icon.plann-btn--small:hover .plann-btn__inner { padding: 0px 0.5rem; }
  .plann-btn--expanding.plann-leading-icon.plann-btn--xsmall:hover .plann-btn__inner, .plann-btn--expanding.plann-trailing-icon.plann-btn--xsmall:hover .plann-btn__inner { padding: 0px 0.25rem; }
  .plann-btn--expanding.plann-leading-icon.plann-btn--xsmall:hover .plann-btn__icon, .plann-btn--expanding.plann-trailing-icon.plann-btn--xsmall:hover .plann-btn__icon { margin: 0px; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled) .plann-btn__inner .plann-btn__label, .plann-btn--expanding.plann-btn--touch-device-expanded .plann-btn__inner .plann-btn__label { max-width: 12.5rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-leading-icon .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-leading-icon .plann-btn__inner { padding-inline: 1.5rem 2rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-trailing-icon .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-trailing-icon .plann-btn__inner { flex-direction: row-reverse; padding-inline: 2rem 1.5rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-leading-icon .plann-btn__icon, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-leading-icon .plann-btn__icon { margin-inline-end: 0.5rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-trailing-icon .plann-btn__icon, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-trailing-icon .plann-btn__icon { margin-inline-start: 0.5rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-leading-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-leading-icon.plann-btn--small .plann-btn__inner { padding-inline: 1rem 1.5rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-trailing-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-trailing-icon.plann-btn--small .plann-btn__inner { padding-inline: 1.5rem 1rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-leading-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-leading-icon.plann-btn--xsmall .plann-btn__inner { padding-inline: 0.75rem 1rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-trailing-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner { padding-inline: 1rem 0.75rem; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-leading-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-leading-icon.plann-btn--xsmall .plann-btn__icon { margin: 0px; }
  .plann-btn--expanding.plann-btn--touch-device-expanded:hover:not(:disabled).plann-trailing-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding.plann-btn--touch-device-expanded.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon { margin: 0px; }
}

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-leading-icon .plann-btn__inner, .plann-btn--expanding:disabled.plann-trailing-icon .plann-btn__inner, .plann-btn--expanding:disabled.plann-leading-icon .plann-btn__inner { padding: 0px 1rem; }

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon .plann-btn__inner .plann-btn__label, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon .plann-btn__inner .plann-btn__label, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon .plann-btn__inner .plann-btn__label, .plann-btn--expanding.plann-btn--loading.plann-leading-icon .plann-btn__inner .plann-btn__label, .plann-btn--expanding:disabled.plann-trailing-icon .plann-btn__inner .plann-btn__label, .plann-btn--expanding:disabled.plann-leading-icon .plann-btn__inner .plann-btn__label { max-width: 0px; }

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon .plann-btn__icon, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon .plann-btn__icon, .plann-btn--expanding.plann-btn--loading.plann-leading-icon .plann-btn__icon, .plann-btn--expanding:disabled.plann-trailing-icon .plann-btn__icon, .plann-btn--expanding:disabled.plann-leading-icon .plann-btn__icon { margin: 0px; }

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-leading-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding:disabled.plann-trailing-icon.plann-btn--small .plann-btn__inner, .plann-btn--expanding:disabled.plann-leading-icon.plann-btn--small .plann-btn__inner { padding: 0px 0.5rem; }

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding.plann-btn--loading.plann-leading-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding:disabled.plann-trailing-icon.plann-btn--xsmall .plann-btn__inner, .plann-btn--expanding:disabled.plann-leading-icon.plann-btn--xsmall .plann-btn__inner { padding: 0px 0.25rem; }

.plann-btn--expanding:focus-visible.plann-btn--loading.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding:focus-visible.plann-btn--loading.plann-leading-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding.plann-btn--loading.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding.plann-btn--loading.plann-leading-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding:disabled.plann-trailing-icon.plann-btn--xsmall .plann-btn__icon, .plann-btn--expanding:disabled.plann-leading-icon.plann-btn--xsmall .plann-btn__icon { margin: 0px; }

.plann-btn--fluid, .plann-btn--fluid .plann-btn__inner { width: 100%; }

.plann-btn--plain.plann-btn--small .plann-btn__inner::after, .plann-btn--plain .plann-btn__inner::after { content: ""; position: absolute; inset: -0.25rem; }

.plann-btn--plain { --background: transparent; --background-hover: transparent; --background-press: transparent; --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.plann-btn--plain.plann-btn--small .plann-btn__inner, .plann-btn--plain .plann-btn__inner, .plann-btn--plain.plann-leading-icon .plann-btn__inner, .plann-btn--plain.plann-trailing-icon .plann-btn__inner { padding: 0px; }

.plann-btn .plann-svg-icon, .plann-btn__label { transition-property: opacity, margin-right, margin-left, transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

:focus:not(:focus-visible) { outline: none; }

a:focus-visible, button:focus-visible, [role="button"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

a:focus-visible p { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-link:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-collapsible:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-expander__btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-expander__content:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-chunky-header:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-checkbox input[type="checkbox"]:focus-visible ~ .plann-checkbox__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-checkbox input[type="checkbox"]:focus-visible:hover ~ .plann-checkbox__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-radio input[type="radio"]:focus-visible ~ .plann-radio__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-radio input[type="radio"]:focus-visible:hover ~ .plann-radio__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-btn:focus-visible, .plann-tabs__panel:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-btn[class*="inverse"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-btn[class*="image-overlay"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-pill:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-icon-pill:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-slider-handle:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-shoppable-image__category-link:focus-visible, .plann-shoppable-image__dot:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-tabs__tab:focus-visible { box-shadow: none; outline: none; }

.plann-tabs__tab:focus-visible::before { bottom: 2px; z-index: unset; }

.plann-tabs__tab:focus-visible::after { content: ""; position: absolute; inset: 0px; display: block; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); border-radius: 4px; }

.plann-dual-btn--secondary .plann-dual-btn__first:focus-visible, .plann-dual-btn--secondary .plann-dual-btn__second:focus-visible { box-shadow: 0 0 0 4px rgb(var(--colour-neutral-1, 255, 255, 255)),0 0 0 6px rgb(var(--colour-neutral-7, 17, 17, 17)); outline: none; transition-property: box-shadow; transition-duration: 0.2s; transition-timing-function: ease-out; }

.plann-dual-btn__first:focus-visible:hover, .plann-dual-btn__second:focus-visible:hover { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17)),0 0 0 4px rgb(var(--colour-neutral-1, 255, 255, 255)),0 0 0 6px rgb(var(--colour-neutral-7, 17, 17, 17)); }

.plann-dual-btn--primary .plann-dual-btn__first:focus-visible, .plann-dual-btn--primary .plann-dual-btn__second:focus-visible { box-shadow: 0 0 0 4px rgb(var(--colour-static-black, 17, 17, 17)),0 0 0 6px rgb(var(--colour-static-white, 255, 255, 255)); outline: none; transition-property: box-shadow; transition-duration: 0.2s; transition-timing-function: ease-out; }

.plann-card:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-card:focus-visible .plann-card__title { text-decoration: none; }

.plann-card:focus-visible p { box-shadow: none; outline: none; }

.plann-content-card .plann-content-card__headers:focus-visible { box-shadow: none; outline: none; }

.plann-content-card .plann-content-card__headers:focus-visible::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-choice-item__action:focus-visible { box-shadow: none; outline: none; }

.plann-choice-item__action:focus-visible + .plann-choice-item__border { border: 2px solid rgb(var(--colour-neutral-3, 223, 223, 223)); }

.plann-choice-item__action:focus-visible + .plann-choice-item__border::before { content: ""; position: absolute; inset: -0.125rem; box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; border-radius: 4px; }

.plann-choice-item--selected .plann-choice-item__action:focus-visible + .plann-choice-item__border { border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163)); }

.plann-choice-item--selected.plann-choice-item--subtle .plann-choice-item__action:focus-visible + .plann-choice-item__border { border: 2px solid rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); }

.plann-simple-video__button:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-jumbo-btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-jumbo-btn.plann-jumbo-btn--inverse:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-accordion-item-header:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-link-list__item:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-switch input[type="checkbox"]:focus-visible + .plann-switch__toggle::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-switch input[type="checkbox"]:focus-visible:hover + .plann-switch__toggle::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-tooltip__trigger-button:focus-visible, .plann-tooltip__custom-trigger-wrapper:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-search .plann-search__scope:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; border-radius: 4px; }

.plann-search .plann-search__scope:focus-visible, .plann-search .plann-btn:focus-visible { box-shadow: 0 0 0 1px rgb(var(--colour-neutral-1, 255, 255, 255)); outline: 2px solid rgb(var(--colour-neutral-7, 17, 17, 17)); outline-offset: 1px; }

.plann-search .plann-search__input:focus-visible { outline: 0px; }

.plann-search .plann-search__input:-webkit-autofill:focus-visible { box-shadow: 0 0 0 3rem rgb(var(--colour-neutral-1, 255, 255, 255)) inset; transition: box-shadow cubic-bezier(0.4, 0, 0.4, 1); caret-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.plann-toast .plann-btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-7, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-1, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-action-list-item__action:focus-visible { outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; outline: none; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); }

.plann-overflow-carousel .plann-btn[class*="inverse"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-modal-header .plann-btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.plann-list-view-item__action:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); }

.plann-quantity-stepper__input:focus-visible { outline: none; }

button.plann-avatar:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }