@asphalt-react/button/dist/index.css

Button

.Button__yXAkD {
  /** Border properties */
  --focus-appearance: var(--focus-outline, 2px solid);
  --focus-color: var(--interactive-focus, #86afff);
  --focus: var(--focus-appearance) var(--focus-color);
  --button-border-inactive: var(--interactive-default, #cbcfd7);
  --button-border-radius: var(--roundness-action-control, 0.375rem);
  --border-width: 0px;
  /* Make sure the height remains consistent when the border width changes */
  --padding: calc(2px - var(--border-width));

  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
  border-radius: var(--button-border-radius);
  box-sizing: border-box;
  background: var(--button-surface-color);
  color: var(--button-content-color);
  font: var(--button-font);
  /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */
  margin: 0;
}

.Button__yXAkD:focus {
  /* Provide a fallback style for browsers
    that don't support :focus-visible */
  outline: var(--focus);
}

.Button__yXAkD:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
    that do support :focus-visible */
  outline: none;
}

.Button__yXAkD:focus-visible {
  outline: var(--focus);
}

.stretch__3qC8p {
  width: 100%;
}

/* Hover states - only for devices with hover capability */
@media (hover: hover) and (pointer: fine) {
  .primaryBrand__Krr2l:hover {
    --button-surface-color: var(
      --interactive-surface-brand-primary-hover,
      #33bb42
    );
  }

  .primaryDanger__NfS2o:hover {
    --button-surface-color: var(
      --interactive-support-danger-primary-hover,
      #f05f74
    );
  }

  .primarySystem__zsZ-u:hover {
    --button-surface-color: var(
      --interactive-surface-inverse-primary-hover,
      #444651
    );
  }

  .secondaryBrand__jfdxk:hover {
    --button-surface-color: var(
      --interactive-surface-brand-secondary-hover,
      #eff8f0
    );
  }

  .secondaryDanger__-U1QE:hover {
    --button-surface-color: var(
      --interactive-support-danger-secondary-hover,
      #fff1f4
    );
  }

  .secondarySystem__PJ4Xx:hover {
    --button-surface-color: var(
      --interactive-surface-inverse-secondary-hover,
      #e9eef4
    );
  }

  .tertiaryBrand__1-455:hover {
    --button-surface-color: var(
      --interactive-surface-brand-secondary-hover,
      #eff8f0
    );
  }

  .tertiaryDanger__tqihQ:hover {
    --button-surface-color: var(
      --interactive-support-danger-secondary-hover,
      #fff1f4
    );
  }

  .tertiarySystem__-S7oN:hover {
    --button-surface-color: var(
      --interactive-surface-inverse-secondary-hover,
      #e9eef4
    );
  }

  .nudeBrand__aDE26:hover {
    --button-surface-color: var(
      --interactive-surface-brand-secondary-hover,
      #eff8f0
    );
  }

  .nudeDanger__zOqPK:hover {
    --button-surface-color: var(
      --interactive-support-danger-secondary-hover,
      #fff1f4
    );
  }

  .nudeSystem__PdH9G:hover {
    --button-surface-color: var(
      --interactive-surface-inverse-secondary-hover,
      #e9eef4
    );
  }
}

/* primary styles */
.primary__VOpsr {
  --button-content-color: var(--content-on-brand, #ffffff);
}

.primaryBrand__Krr2l {
  --button-surface-color: var(
    --interactive-surface-brand-primary-default,
    #00aa13
  );
}

.primaryBrand__Krr2l:active {
  --button-surface-color: var(
    --interactive-surface-brand-primary-active,
    #067817
  );
}

.primaryDanger__NfS2o {
  --button-surface-color: var(
    --interactive-support-danger-primary-default,
    #d83950
  );
  --button-content-color: var(--content-on-support, #ffffff);
}

.primaryDanger__NfS2o:active {
  --button-surface-color: var(
    --interactive-support-danger-primary-active,
    #bb1a31
  );
}

.primarySystem__zsZ-u {
  --button-surface-color: var(
    --interactive-surface-inverse-primary-default,
    #383942
  );
}

.primarySystem__zsZ-u:active {
  --button-surface-color: var(
    --interactive-surface-inverse-primary-active,
    #0a0d1d
  );
}

/* secondary styles */
.secondary__zealy {
  --button-surface-color: var(--interactive-surface-primary-default, #ffffff);
  --border-width: var(--border-width-action, 2px);

  border-color: var(--button-border-inactive);
}

.secondaryBrand__jfdxk {
  --button-content-color: var(--content-brand, #00aa13);
}

.secondaryBrand__jfdxk:active {
  --button-surface-color: var(
    --interactive-surface-brand-secondary-active,
    #bdecc6
  );
}

.secondaryDanger__-U1QE {
  --button-content-color: var(--content-danger, #bb354e);
}

.secondaryDanger__-U1QE:active {
  --button-surface-color: var(
    --interactive-support-danger-secondary-active,
    #ffc6d0
  );
}

.secondarySystem__PJ4Xx {
  --button-content-color: var(--content-primary, #2d2e34);
}

.secondarySystem__PJ4Xx:active {
  --button-surface-color: var(
    --interactive-surface-inverse-secondary-active,
    #b7c2d2
  );
}

/* tertiary styles */
.tertiaryBrand__1-455 {
  --button-surface-color: var(
    --interactive-surface-brand-secondary-default,
    #dff6e0
  );
  --button-content-color: var(--content-brand, #00aa13);
}

.tertiaryBrand__1-455:active {
  --button-surface-color: var(
    --interactive-surface-brand-secondary-active,
    #bdecc6
  );
}

.tertiaryDanger__tqihQ {
  --button-surface-color: var(
    --interactive-support-danger-secondary-default,
    #fee1e7
  );
  --button-content-color: var(--content-danger, #bb354e);
}

.tertiaryDanger__tqihQ:active {
  --button-surface-color: var(
    --interactive-support-danger-secondary-active,
    #ffc6d0
  );
}

.tertiarySystem__-S7oN {
  --button-surface-color: var(
    --interactive-surface-inverse-secondary-default,
    #d9dfe8
  );
  --button-content-color: var(--content-primary, #2d2e34);
}

.tertiarySystem__-S7oN:active {
  --button-surface-color: var(
    --interactive-surface-inverse-secondary-active,
    #b7c2d2
  );
}

/* nude styles */
.nude__SJHsv {
  --button-surface-color: transparent;
}

.nudeBrand__aDE26 {
  --button-content-color: var(--content-brand, #00aa13);
}

.nudeBrand__aDE26:active {
  --button-surface-color: var(
    --interactive-surface-brand-secondary-active,
    #bdecc6
  );
}

.nudeDanger__zOqPK {
  --button-content-color: var(--content-danger, #bb354e);
}

.nudeDanger__zOqPK:active {
  --button-surface-color: var(
    --interactive-support-danger-secondary-active,
    #ffc6d0
  );
}

.nudeSystem__PdH9G {
  --button-content-color: var(--content-primary, #2d2e34);
}

.nudeSystem__PdH9G:active {
  --button-surface-color: var(
    --interactive-surface-inverse-secondary-active,
    #b7c2d2
  );
}

/* compact icon styles */
.compactIcon__8D7Nl {
  border-radius: var(--button-border-radius);
}

/* disabled styles */
.primary__VOpsr:disabled,
.secondary__zealy:disabled,
.tertiary__pRmHg:disabled,
.nude__SJHsv:disabled {
  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);
  --button-content-color: var(--content-disabled, #9a9eaa);
  border-color: transparent;
  cursor: not-allowed;
}

.qualifier__JJPaq {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.qualifierStart__6o51Y {
  margin-left: 0;
  margin-right: 0.625rem;
}

.qualifierEnd__Yb2zt {
  margin-left: 0.625rem;
  margin-right: 0;
}

/** rtl style for qualifier */

*[dir="rtl"] .qualifierStart__6o51Y {
  margin-left: 0.625rem;
  margin-right: 0;
}

*[dir="rtl"] .qualifierEnd__Yb2zt {
  margin-right: 0.625rem;
  margin-left: 0;
}

/* sizes */
.buttonL__dT9zq {
  padding: calc(1.0625rem + var(--padding)) calc(2rem + var(--padding));
  --button-font: var(
    --text-bold-L,
    600 1.125rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  line-height: 1;
}
.buttonL__dT9zq:is(:not(.secondary__zealy)) {
  padding-block: 1.1875rem;
  padding-inline: 2.125rem;
}

.buttonM__jmSYx {
  padding: calc(0.875rem + var(--padding)) calc(2rem + var(--padding));
  --button-font: var(
    --text-bold-M,
    600 1rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  line-height: 1;
}
.buttonM__jmSYx:is(:not(.secondary__zealy)) {
  padding-block: 1rem;
  padding-inline: 2.125rem;
}

.buttonS__MrlZh {
  padding: calc(0.6875rem + var(--padding)) calc(1.5rem + var(--padding));
  --button-font: var(
    --text-bold-S,
    600 0.875rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  line-height: 1;
}
.buttonS__MrlZh:is(:not(.secondary__zealy)) {
  padding-block: 0.8125rem;
  padding-inline: 1.625rem;
}

.buttonXs__r9M7f {
  padding: calc(0.625rem + var(--padding)) calc(1rem + var(--padding));
  --button-font: var(
    --text-bold-XS,
    600 0.75rem/1.5 Maison Neue,
    Helvetica,
    Open Sans,
    sans-serif
  );
  line-height: 1;
}
.buttonXs__r9M7f:is(:not(.secondary__zealy)) {
  padding-block: 0.75rem;
  padding-inline: 1.125rem;
}

.iconL__9Ee56 {
  padding: calc(1.0625rem + var(--padding));
}
.iconL__9Ee56:is(:not(.secondary__zealy)) {
  padding-block: 1.1875rem;
  padding-inline: 1.1875rem;
}

.iconM__7SUOV {
  padding: calc(0.875rem + var(--padding));
}
.iconM__7SUOV:is(:not(.secondary__zealy)) {
  padding-block: 1rem;
  padding-inline: 1rem;
}

.iconS__ItZGm {
  padding: calc(0.6875rem + var(--padding));
}
.iconS__ItZGm:is(:not(.secondary__zealy)) {
  padding-block: 0.8125rem;
  padding-inline: 0.8125rem;
}

.iconXs__5mF1K {
  padding: calc(0.625rem + var(--padding));
}
.iconXs__5mF1K:is(:not(.secondary__zealy)) {
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
}

/** compact */

.compactL__lisV7 {
  padding: calc(0.563rem + var(--padding));
}
.compactL__lisV7:is(:not(.secondary__zealy)) {
  padding-block: 0.688rem;
  padding-inline: 0.688rem;
}

.compactM__hqnWo {
  padding: calc(0.375rem + var(--padding));
}
.compactM__hqnWo:is(:not(.secondary__zealy)) {
  padding-block: 0.5rem;
  padding-inline: 0.5rem;
}

.compactS__nuYcM {
  padding-block: calc(0.1875rem + var(--padding));
  padding-inline: calc(0.125rem + var(--padding));
}

.compactS__nuYcM:is(:not(.secondary__zealy)) {
  padding-block: 0.3125rem;
  padding-inline: 0.25rem;
}

.compactXs__AywxT {
  padding-inline: calc(0.063rem + var(--padding));
  padding-block: calc(0.125rem + var(--padding));
}

.compactXs__AywxT:is(:not(.secondary__zealy)) {
  padding-block: 0.25rem;
  padding-inline: 0.188rem;
}

.compactIconL__L0Ed1 {
  padding: calc(0.5625rem + var(--padding));
}
.compactIconL__L0Ed1:is(:not(.secondary__zealy)) {
  padding-block: 0.6875rem;
  padding-inline: 0.6875rem;
}

.compactIconM__b6gxq {
  padding: calc(0.375rem + var(--padding));
}
.compactIconM__b6gxq:is(:not(.secondary__zealy)) {
  padding-block: 0.5rem;
  padding-inline: 0.5rem;
}

.compactIconS__H7G01 {
  padding: calc(0.1875rem + var(--padding));
}
.compactIconS__H7G01:is(:not(.secondary__zealy)) {
  padding-block: 0.3125rem;
  padding-inline: 0.3125rem;
}

.compactIconXs__ei3A0 {
  padding: calc(0.125rem + var(--padding));
}
.compactIconXs__ei3A0:is(:not(.secondary__zealy)) {
  padding-block: 0.25rem;
  padding-inline: 0.25rem;
}

/** link style */
.link__OB7N- {
  text-decoration: underline;
}

.qualifierWrapper__QSvCa {
  display: inline-flex;
  pointer-events: none;
}

.iconWrapper__avueo {
  display: inline-flex;
  pointer-events: none;
}

.stickStart__XljCt {
  border-top-left-radius: var(--roundness-sharp, 0rem);
  border-bottom-left-radius: var(--roundness-sharp, 0rem);
}

.stickEnd__KBlxz {
  border-top-right-radius: var(--roundness-sharp, 0rem);
  border-bottom-right-radius: var(--roundness-sharp, 0rem);
}

.stickStart__XljCt:focus-visible {
  position: relative;
}

.stickEnd__KBlxz:focus-visible {
  position: relative;
}

@supports not selector(:focus-visible) {
  .stickStart__XljCt:focus {
    position: relative;
  }

  .stickEnd__KBlxz:focus {
    position: relative;
  }
}

.stickPrimary__5OgXf {
  margin-left: 1px;
}

.stickSecondary__mt79y {
  border-left: 0;
}

.stickTertiary__pRNFE {
  margin-left: 1px;
}

.stickNude__ppKxQ {
  margin-left: 1px;
}

.noUnderline__4ntOt {
  text-decoration: none;
}