@postnord/web-components/collection/components/buttons/pn-button/pn-button.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-button {
  display: inline-block;
}

pn-button .pn-button {
  position: relative;
  cursor: pointer;
  padding: 0.75em 1.5em;
  width: round(up, 100%, 1px);
  min-height: 3em;
  min-width: 5.5em;
  border: none;
  border-radius: 3em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  color: #ffffff;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  line-height: 1.5em;
  -webkit-tap-highlight-color: transparent;
  transition-property: color, outline-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  outline: 0.2rem solid transparent;
  outline-offset: 0.2rem;
}
pn-button .pn-button:focus-visible {
  outline-color: #005d92;
}
pn-button .pn-button:disabled, pn-button .pn-button[aria-disabled] {
  cursor: auto;
  pointer-events: none;
}
pn-button .pn-button-content {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.2s;
}
pn-button .pn-button-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  border-radius: 3em;
  border: none;
  background-color: #005d92;
  overflow: hidden;
  transition-property: width, background-color, border-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.2s, 0s, 0s;
}
pn-button .pn-button-bg::after {
  content: "";
  position: absolute;
  will-change: transform;
  width: 100%;
  height: 100%;
  background-color: #0d234b;
  border-radius: inherit;
  left: 0;
  transform: translateX(-103%);
  opacity: 0.5;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
pn-button .pn-button .pn-ripple {
  animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.1;
  pointer-events: none;
  z-index: 3;
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
pn-button .pn-button-tooltip {
  z-index: 5;
  position: absolute;
  top: calc(100% + 0.35em);
  left: 50%;
  pointer-events: none;
  color: #ffffff;
  background-color: #0d234b;
  box-shadow: 0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);
  padding: 0.25em 0.75em;
  border-radius: inherit;
  max-width: min(95vw, 40em);
  transform: translateX(-50%) translateX(var(--pn-dx));
  width: max-content;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
pn-button .pn-button-tooltip-text {
  font-size: 0.875em;
  font-weight: 300;
}
pn-button .pn-button pn-icon {
  flex-shrink: 0;
}
pn-button .pn-button pn-icon .pn-icon-svg path {
  fill: #ffffff;
}
pn-button .pn-button pn-spinner {
  position: absolute;
  transform: scale(0);
}
pn-button .pn-button:hover .pn-button-bg:after, pn-button .pn-button:focus .pn-button-bg:after {
  transform: translateX(0);
}
pn-button .pn-button[data-appearance=light] {
  color: #005d92;
}
pn-button .pn-button[data-appearance=light] pn-icon .pn-icon-svg path {
  fill: #005d92;
}
pn-button .pn-button[data-appearance=light] pn-spinner .circle {
  stroke: #005d92;
}
pn-button .pn-button[data-appearance=light] pn-spinner .dot {
  fill: #005d92;
}
pn-button .pn-button[data-appearance=light] .pn-button-bg {
  border-color: #005d92;
  background-color: #ffffff;
}
pn-button .pn-button[data-appearance=light] .pn-button-bg:after {
  background-color: #e0f8ff;
  opacity: 1;
}
pn-button .pn-button[data-appearance=light] .pn-button-bg .pn-ripple {
  background-color: #005d92;
}
pn-button .pn-button[data-appearance=warning] {
  color: #a70707;
  outline: 0.2rem solid transparent;
  outline-offset: 0.2rem;
}
pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path {
  fill: #a70707;
}
pn-button .pn-button[data-appearance=warning] pn-spinner .circle {
  stroke: #a70707;
}
pn-button .pn-button[data-appearance=warning] pn-spinner .dot {
  fill: #a70707;
}
pn-button .pn-button[data-appearance=warning] .pn-button-bg {
  border: 0.0625em solid #a70707;
  background-color: #fdefee;
}
pn-button .pn-button[data-appearance=warning] .pn-button-bg:after {
  background-color: #a70707;
  opacity: 1;
}
pn-button .pn-button[data-appearance=warning]:hover, pn-button .pn-button[data-appearance=warning]:focus {
  color: #ffffff;
}
pn-button .pn-button[data-appearance=warning]:hover pn-icon .pn-icon-svg path, pn-button .pn-button[data-appearance=warning]:focus pn-icon .pn-icon-svg path {
  fill: #ffffff;
}
pn-button .pn-button[data-appearance=warning]:hover pn-spinner .circle, pn-button .pn-button[data-appearance=warning]:focus pn-spinner .circle {
  stroke: #ffffff;
}
pn-button .pn-button[data-appearance=warning]:hover pn-spinner .dot, pn-button .pn-button[data-appearance=warning]:focus pn-spinner .dot {
  fill: #ffffff;
}
pn-button .pn-button[data-appearance=warning]:focus-visible {
  outline-color: #a70707;
}
pn-button .pn-button[data-variant=borderless] .pn-button-bg {
  border: none;
  background-color: transparent;
}
pn-button .pn-button[data-variant=borderless] .pn-button-bg:after {
  background-color: #ffffff;
  opacity: 0.1;
}
pn-button .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after {
  background-color: #e0f8ff;
  opacity: 1;
}
pn-button .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after {
  background-color: #a70707;
  opacity: 1;
}
pn-button .pn-button[data-variant=outlined] .pn-button-bg {
  border: 0.0625em solid #ffffff;
  background-color: transparent;
}
pn-button .pn-button[data-variant=outlined] .pn-button-bg:after {
  background-color: #ffffff;
  opacity: 0.1;
}
pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg {
  border-color: #005d92;
  background-color: #ffffff;
}
pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after {
  background-color: #00a0d6;
  opacity: 0.1;
}
pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg {
  border-color: #a70707;
}
pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after {
  background-color: #a70707;
  opacity: 1;
}
pn-button .pn-button[data-left-icon] .pn-button-content {
  flex-direction: row-reverse;
}
pn-button .pn-button[data-icon-only] {
  width: 3em;
  min-width: 0;
}
pn-button .pn-button[data-icon-only][data-small] {
  width: 2em;
  min-width: 0;
  padding: 0;
}
pn-button .pn-button[data-small] {
  padding: 0.375em 1em;
  min-height: 2em;
  min-width: unset;
  line-height: 1.25em;
}
pn-button .pn-button[data-small] .pn-button-content {
  gap: 0.25em;
}
pn-button .pn-button[data-small] .pn-button-text {
  font-size: 0.875em;
}
pn-button .pn-button[data-small] pn-icon .pn-icon-svg {
  height: 1.25em;
  width: 1.25em;
}
pn-button .pn-button[data-tooltip-open] .pn-button-tooltip {
  opacity: 1;
}
pn-button .pn-button[data-tooltip-upwards] .pn-button-tooltip {
  top: auto;
  bottom: calc(100% + 0.35em);
}
pn-button .pn-button[data-loading] pn-spinner {
  transform: scale(1);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.2s;
}
pn-button .pn-button[data-loading] .pn-button-content {
  pointer-events: none;
  opacity: 0;
  transition-delay: 0s;
  transform: translateY(100%);
}
pn-button .pn-button[data-loading] .pn-button-bg {
  width: 3em;
}
pn-button .pn-button[data-loading][data-small] .pn-button-bg {
  width: 2em;
}