@charset "utf-8";

.AddToBagButton { display: flex; height: 3rem; position: relative; }

.AddToBagButton__AddToBag { transition: transform var(--pal-anim-transition-xxfast); width: 100%; }

.AddToBagButton__AddToBagOverlay { height: 2.5rem; }

.AddToBagButton__Added { align-items: center; display: flex; justify-content: center; text-transform: uppercase; width: 100%; }

.AddToBagButton__Added .Text-ds strong { font-weight: var(--pal-font-weight-medium); }

.AddToBagButton__AddedProgress { align-items: center; display: flex; flex-wrap: nowrap; justify-content: center; min-height: 3rem; padding: 0px 1rem; transition: opacity 0.1s linear; width: 100%; }

.AddToBagButton__AddedProgress span.Text-ds--body-3 { animation: moveText .7s var(--pal-anim-ease-in-out) forwards; }

.AddToBagButton__SvgContainer { margin-right: 1rem; position: relative; width: 1rem; }

.AddToBagButton__SvgContainer span { display: block; position: relative; z-index: 2; }

.AddToBagButton__SvgContainer::after { animation: scaleOut 2.5s var(--pal-anim-ease-in-out) forwards; background-color: var(--pal-colors-default-background-default); border-radius: 50%; content: ""; display: block; height: 0.8rem; left: -0.1rem; position: absolute; top: 0.2rem; width: 0.8rem; z-index: 1; }

.AddToBagButton__Add, .AddToBagButton__Minus { display: grid; padding: 0px 1.1878rem; place-items: center; width: 3rem; }

.AddToBagButton__Check { z-index: 3; }

.AddToBagButton .pal-c-Icon--burst { animation: scale-fade 1.8s var(--pal-anim-ease-in-out) forwards; opacity: 0; position: absolute; z-index: 1; }

@media (min-width: 1024px) {
  .AddToBagButton .pal-c-Button.focus-visible, .AddToBagButton .pal-c-Button:focus { outline: -webkit-focus-ring-color auto thin; }
}

.AddToBagButton .pal-c-Button--withHover { border: none; outline: none; transform-origin: 50% 50%; transition: transform var(--pal-anim-transition-xxfast) linear; z-index: 0; }

.AddToBagButton .pal-c-Button--withHover::after { inset: 0px; content: ""; position: absolute; transform-origin: 50% 50%; z-index: -1; }

.AddToBagButton .pal-c-Button--withHover:focus::after { outline: none; }

@keyframes scale-fade { 
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
  90% { opacity: 0; visibility: hidden; }
}

@keyframes scaleOut { 
  0% { opacity: 1; transform: scale(1); }
  50% { transform: scale(2); }
  100% { visibility: hidden; }
}

@keyframes moveText { 
  0% { transform: translateX(-1rem); }
  100% { transform: translateX(0px); }
}