/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Button {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-items: center;
  background-color: var(--colorsSurfaceGrey, #eeeeee);
  border: 0;
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--colorsTextOnGrey, #444445);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline-offset cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
  user-select: none;
  position: relative;
  outline-offset: 0;
  outline: solid 0 transparent;
}
.Button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  top: 0;
  left: 0;
}
.Button:hover {
  text-decoration: none;
}
.Button:hover::before {
  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
}
.Button:active::before, .Button.Button--selected::before {
  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
}
.Button:focus-visible {
  outline-offset: 2px;
  outline: solid 2px var(--colorsBorderPrimary, #0265dc);
}
.Button.Button--outline {
  background-color: var(--colorsSurfaceDefault, white);
  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
}
.Button.Button--outline:hover::before {
  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
}
.Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
}
.Button.Button--subtle {
  background-color: transparent;
}
.Button.Button--subtle:hover::before {
  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
}
.Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
}

button.Button {
  font-size: 16px;
  line-height: 1;
}

.Button.Button--icon-only {
  padding: 8px;
  line-height: 1.5;
}
.Button.Button--icon-only.Button--xsmall {
  line-height: 1;
}
.Button.Button--icon-only.Button--xsmall svg {
  height: 20px;
  width: 20px;
}

.Button--icon-only svg,
.Button--icon-only .Button__icon > :not(i) {
  height: 24px;
  width: 24px;
  display: block;
}

.Button__content {
  align-items: center;
  display: flex;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.Button--grey:hover, .Button--grey:active, .Button--grey.Button--selected, .Button--grey:focus, .Button--grey:focus:active {
  color: var(--colorsTextOnGrey, #444445);
}

.Button--blue {
  background-color: var(--colorsSurfacePrimary, #0265dc);
  color: var(--colorsTextOnPrimary, white);
}
.Button--blue:hover::before {
  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
}
.Button--blue:active::before, .Button--blue.Button--selected::before {
  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
}
.Button--blue.Button--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
  color: var(--colorsTextPrimary, #0265dc);
}
.Button--blue.Button--outline:hover::before {
  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
}
.Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
}
.Button--blue.Button--subtle {
  background-color: transparent;
  color: var(--colorsTextPrimary, #0265dc);
}
.Button--blue.Button--subtle:hover::before {
  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
}
.Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
}

.Button--red {
  background-color: var(--colorsSurfaceCritical, #e13212);
  color: var(--colorsTextOnCritical, #ffffff);
}
.Button--red:hover::before {
  background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
}
.Button--red:focus-visible {
  outline: solid 2px var(--colorsBorderCritical, #e13212);
}
.Button--red:active::before, .Button--red.Button--selected::before {
  background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
}
.Button--red.Button--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
  color: var(--colorsTextCritical, #bf2a00);
}
.Button--red.Button--outline:hover::before {
  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
}
.Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
}
.Button--red.Button--subtle {
  background-color: transparent;
  color: var(--colorsTextCritical, #bf2a00);
}
.Button--red.Button--subtle:hover::before {
  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
}
.Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
}

.Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
  background: #bcbcbd;
  color: #606162;
  box-shadow: none;
  opacity: 0.4;
}
.Button--disabled svg, .Button--disabled.Button--outline svg, .Button--disabled.Button--subtle svg {
  opacity: 0.6;
}

.Button--inactive {
  pointer-events: none;
}

.Button--xsmall {
  font-size: 14px;
  padding: 6px 12px;
}
.Button--xsmall.Button--icon-only {
  font-size: 20px;
  padding: 3px;
}

button.Button--xsmall {
  font-size: 14px;
}

.Button--small {
  padding: 8px 16px;
}
.Button--small.Button--icon-only {
  padding: 4px;
}

.Button--large {
  padding: 16px 20px;
}
.Button--large.Button--icon-only {
  padding: 12px;
}

.Button--full {
  display: block;
}

button.Button--full {
  width: 100%;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.Button--loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.Button--loading .Button__content {
  opacity: 0;
}

.Button--loading::before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 0.15em solid transparent;
  border-top-color: currentColor;
  animation: spin 0.6s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.4em;
  margin-left: -0.4em;
}

.Button__icon--left {
  padding-right: 8px;
}

.Button__icon--right {
  padding-left: 8px;
}

.Button__icon-svg.a-Icon {
  vertical-align: top;
}

.Button > .Button__content::before {
  content: "";
  height: 10px;
}

.Button.Button--xsmall > .Button__content::before {
  height: 8px;
}

/*# sourceMappingURL=Button.css.map */