Sign in with Klarna - Button styling

sign-in-with-klarna-style.css

:root{--current-gap: 0px}
.klarna-sdk-button-container{
  width:335px;
  height:48px;
  display:inline-block
}
#klarna-sdk-button {
  container-type:inline-size;
  container-name:sdk-button-content;
  position:relative;
  height:inherit;
  width:inherit;
  min-width:48px;
  min-height:35px;
  max-height:60px;
  padding:0;
  outline:none;
  border:0;
  margin:0;
  background-color:rgba(0,0,0,0)
}

#klarna-sdk-button:focus #klarna-sdk-button__outline {
  position:absolute;
  inset:-4px;
  border:2px solid #0d0e0f;
  border-radius:8px;
  min-height:inherit;
  max-height:64px;
  margin:auto 0
}

#klarna-sdk-button #klarna-sdk-button__inner-container{
  display:inline-block;
  min-height:inherit;
  max-height:inherit;
  min-width:inherit;
  width:inherit;
  height:inherit;
  cursor:pointer;
  transition:background-color .2s ease;
  box-sizing:border-box;
  border-radius:8px
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text {
  font-family:"-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Arial","sans-serif";
  height:inherit;
  font-size:16px;
  opacity:1;
  transition:color .2s ease;
  text-rendering:optimizeLegibility;
  white-space:nowrap;
  max-height:inherit;
  min-height:inherit;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  --current-gap: 14px;
  gap:6px;
  margin:0 var(--current-gap) 0 var(--current-gap)
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text.hidden{
  opacity:0
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text--center{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo{
  width:24px;
  height:24px
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{
  width:inherit;
  height:inherit
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #badge{
  width:64px;
  height:28px
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #badge svg{
  width:inherit;
  height:inherit
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy{
  flex:1 1 0%
}

#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy--center{flex:0 1 0%}
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy--right{
  flex:1 1 0%;
  margin-left:
  calc(var(--current-gap) + 20px)
}

.hideLogo{display:none}

@container sdk-button-content (width > 199px){}
@container sdk-button-content (width < 200px){
  #klarna-sdk-button #copy{display:none}
  #klarna-sdk-button #badge{display:inline-block}
  #klarna-sdk-button #logo{display:none}
}
@container sdk-button-content (width < 80px){
  #klarna-sdk-button{gap:0}
  #klarna-sdk-button #logo{display:inline-block}
  #klarna-sdk-button #badge{display:none}
  #klarna-sdk-button #copy{display:none}
  #klarna-sdk-button #klarna-sdk-button__text--center #logo{margin:0}
  #klarna-sdk-button #klarna-sdk-button__text--center #badge{margin:0}
}
#klarna-sdk-button.theme-outlined #klarna-sdk-button__inner-container{color:#0e0e0f;background-color:#fff;border:1px solid #0e0e0f}
#klarna-sdk-button.theme-outlined #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#0e0e0f}
#klarna-sdk-button.theme-outlined:hover #klarna-sdk-button__inner-container{background-color:#f1f1f1;color:#333536}
#klarna-sdk-button.theme-outlined:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#333536}
#klarna-sdk-button.theme-outlined:focus #klarna-sdk-button__outline{inset:-5px}
#klarna-sdk-button.theme-outlined:focus #klarna-sdk-button__outline #klarna-sdk-button__text #logo svg{fill:#0d0e0f}
#klarna-sdk-button.theme-outlined:active #klarna-sdk-button__inner-container{background-color:#e2e2e2;color:#0d0e0f}
#klarna-sdk-button.theme-light #klarna-sdk-button__inner-container{color:#0e0e0f;background-color:#fff}
#klarna-sdk-button.theme-light #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#0e0e0f}
#klarna-sdk-button.theme-light:hover #klarna-sdk-button__inner-container{background-color:#f1f1f1;color:#333536}
#klarna-sdk-button.theme-light:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#333536}
#klarna-sdk-button.theme-light:focus #klarna-sdk-button__outline{inset:-5px}
#klarna-sdk-button.theme-light:focus #klarna-sdk-button__outline #klarna-sdk-button__text #logo svg{fill:#0d0e0f}
#klarna-sdk-button.theme-light:active #klarna-sign-in__inner-container{background-color:#e2e2e2;color:#0d0e0f}
#klarna-sdk-button.theme-dark #klarna-sdk-button__inner-container{color:#fff;background-color:#0e0e0f;border:none}
#klarna-sdk-button.theme-dark #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#fff}
#klarna-sdk-button.theme-dark:hover #klarna-sdk-button__inner-container{background-color:#333536;color:#f1f1f1}
#klarna-sdk-button.theme-dark:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#f1f1f1}
#klarna-sdk-button.theme-dark:active #klarna-sdk-button__inner-container{background-color:#0d0e0f;color:#e2e2e2}
#klarna-sdk-button.theme-dark:active #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#e2e2e2}
#klarna-sdk-button.shape-rect #klarna-sdk-button__inner-container{border-radius:0}
#klarna-sdk-button.shape-rect:focus #klarna-sdk-button__outline{border-radius:0}
#klarna-sdk-button.shape-pill #klarna-sdk-button__inner-container{border-radius:60px}
#klarna-sdk-button.shape-pill:focus #klarna-sdk-button__outline{border-radius:60px}
#klarna-sdk-button.copy-default-en{min-width:165px}
#klarna-sdk-button__spinner{
  width:24px;
  height:24px;
  border:2px solid;
  border-bottom-color:rgba(0,0,0,0);
  border-radius:50%;
  display:inline-block;
  box-sizing:border-box;
  animation:rotation 1s linear infinite;
  position:absolute;top:calc(50% - 12px);
  right:calc(50% - 12px);
  pointer-events:none
}

.theme-outlined #klarna-sdk-button__spinner{
  border-color:#0e0e0f;
  border-bottom-color:#fff
}

.theme-dark #klarna-sdk-button__spinner{
  border-color:#fff;
  border-bottom-color:#0e0e0f
}

@keyframes rotation{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}