@awsui/components-react/button/styles.scoped.css

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

._button_vjswe_lhxlb_7:not(#\9){
  border-collapse:separate;
  border-spacing:0;
  caption-side:top;
  cursor:auto;
  direction:ltr;
  empty-cells:show;
  font-family:serif;
  font-size:medium;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-stretch:normal;
  line-height:normal;
  hyphens:none;
  letter-spacing:normal;
  list-style:disc outside none;
  tab-size:8;
  text-align:left;
  text-align-last:auto;
  text-indent:0;
  text-shadow:none;
  text-transform:none;
  visibility:visible;
  white-space:normal;
  widows:2;
  word-spacing:normal;
  box-sizing:border-box;
  font-size:1.4rem;
  font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
  line-height:2.2rem;
  line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
  color:#16191f;
  color:var(--color-text-body-default-2ZjSsg, #16191f);
  font-weight:400;
  font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
  min-width:0;
  -ms-word-break:break-all;
  word-break:break-word;
  border-radius:2px;
  border:1px solid;
  padding:0.4rem 2rem;
  padding:var(--space-scaled-xxs-wz9S8K, 0.4rem) var(--space-l-3SmGmy, 2rem);
  font-weight:700;
  letter-spacing:0.25px;
  display:inline-block;
  text-decoration:none;
  cursor:pointer;
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27:not(#\9){
  background:#ffffff;
  background:var(--color-background-button-normal-default-2k-l2Z, #ffffff);
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
  border-color:#545b64;
  border-color:var(--color-border-button-normal-default-3MrzkF, #545b64);
  position:relative;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27:not(#\9):hover{
  background:#fafafa;
  background:var(--color-background-button-normal-hover-yKNU8Y, #fafafa);
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
  border-color:#16191f;
  border-color:var(--color-border-button-normal-hover-2ZjSsg, #16191f);
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27:not(#\9):active{
  background:#eaeded;
  background:var(--color-background-button-normal-active-p5fVsz, #eaeded);
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-normal_vjswe_lhxlb_27._disabled_vjswe_lhxlb_66:not(#\9){
  background:#ffffff;
  background:var(--color-background-button-normal-disabled-2k-l2Z, #ffffff);
  border-color:#d5dbdb;
  border-color:var(--color-border-button-normal-disabled-1Theti, #d5dbdb);
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74:not(#\9){
  background:#0073bb;
  background:var(--color-background-button-primary-default-1OBylm, #0073bb);
  color:#ffffff;
  color:var(--color-text-inverted-2k-l2Z, #ffffff);
  border-color:#0073bb;
  border-color:var(--color-background-button-primary-default-1OBylm, #0073bb);
  position:relative;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74:not(#\9):hover{
  background:#0a4a74;
  background:var(--color-background-button-primary-hover-2ge3DI, #0a4a74);
  color:#ffffff;
  color:var(--color-text-inverted-2k-l2Z, #ffffff);
  border-color:#12293b;
  border-color:var(--color-border-button-primary-hover-39Av-i, #12293b);
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74:not(#\9):active{
  background:#12293b;
  background:var(--color-background-button-primary-active-39Av-i, #12293b);
  color:#ffffff;
  color:var(--color-text-inverted-2k-l2Z, #ffffff);
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-primary_vjswe_lhxlb_74._disabled_vjswe_lhxlb_66:not(#\9){
  background:#ffffff;
  background:var(--color-background-button-primary-disabled-2k-l2Z, #ffffff);
  border-color:#d5dbdb;
  border-color:var(--color-border-button-primary-disabled-1Theti, #d5dbdb);
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121:not(#\9){
  background:transparent;
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
  border-color:transparent;
  position:relative;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121:not(#\9):hover{
  background:#fafafa;
  background:var(--color-background-button-link-hover-yKNU8Y, #fafafa);
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
  border-color:#fafafa;
  border-color:var(--color-background-button-link-hover-yKNU8Y, #fafafa);
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121:not(#\9):active{
  background:#eaeded;
  background:var(--color-background-button-link-active-p5fVsz, #eaeded);
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-link_vjswe_lhxlb_121._disabled_vjswe_lhxlb_66:not(#\9){
  background:transparent;
  border-color:transparent;
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168:not(#\9){
  background:transparent;
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
  border-color:transparent;
  position:relative;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168:not(#\9):hover{
  background:transparent;
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
  border-color:transparent;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168:not(#\9):active{
  background:transparent;
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168._disabled_vjswe_lhxlb_66:not(#\9){
  background:transparent;
  border-color:transparent;
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215:not(#\9){
  background:transparent;
  color:#d5dbdb;
  color:var(--color-text-notification-icon-default-1Theti, #d5dbdb);
  border-color:transparent;
  position:relative;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215:not(#\9):hover{
  background:transparent;
  color:#fafafa;
  color:var(--color-text-notification-icon-hover-yKNU8Y, #fafafa);
  border-color:transparent;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215:not(#\9):active{
  background:transparent;
  color:#d5dbdb;
  color:var(--color-text-notification-icon-default-1Theti, #d5dbdb);
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215._disabled_vjswe_lhxlb_66:not(#\9){
  background:transparent;
  border-color:transparent;
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262:not(#\9){
  background:transparent;
  color:#0073bb;
  color:var(--color-text-link-default-3H8Hch, #0073bb);
  border-color:transparent;
  border-width:0;
  position:relative;
  text-decoration:none;
  padding:0;
  font-weight:normal;
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262:not(#\9):hover{
  background:transparent;
  color:#0073bb;
  color:var(--color-text-link-default-3H8Hch, #0073bb);
  border-color:transparent;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262:not(#\9):active{
  background:transparent;
  color:#0073bb;
  color:var(--color-text-link-default-3H8Hch, #0073bb);
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262[data-awsui-focus-visible=true]:not(#\9):focus{
  position:relative;
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  outline-offset:calc(3px - 1px);
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262[data-awsui-focus-visible=true]:not(#\9):focus::before{
  content:" ";
  display:block;
  position:absolute;
  left:-3px;
  top:-3px;
  width:calc(100% + 2 * 3px);
  height:calc(100% + 2 * 3px);
  border-radius:2px;
  box-shadow:0 0 0 2px #00a1c9;
  box-shadow:0 0 0 2px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._button_vjswe_lhxlb_7._variant-breadcrumb-group_vjswe_lhxlb_262._disabled_vjswe_lhxlb_66:not(#\9){
  background:transparent;
  border-color:transparent;
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  text-decoration:none;
  pointer-events:none;
  cursor:auto;
}
._button_vjswe_lhxlb_7._button-no-text_vjswe_lhxlb_312:not(#\9){
  padding-left:1.6rem;
  padding-left:var(--space-m-3o9QS_, 1.6rem);
  padding-right:1.6rem;
  padding-right:var(--space-m-3o9QS_, 1.6rem);
}
._button_vjswe_lhxlb_7._button-no-wrap_vjswe_lhxlb_316:not(#\9){
  white-space:nowrap;
}
._button_vjswe_lhxlb_7._variant-icon_vjswe_lhxlb_168:not(#\9), ._button_vjswe_lhxlb_7._variant-flashbar-icon_vjswe_lhxlb_215:not(#\9){
  padding-left:0.4rem;
  padding-left:var(--space-xxs-1SRICw, 0.4rem);
  padding-right:0.4rem;
  padding-right:var(--space-xxs-1SRICw, 0.4rem);
}
._button_vjswe_lhxlb_7 > ._icon-left_vjswe_lhxlb_323:not(#\9){
  position:relative;
  left:calc(-1 * 0.4rem);
  left:calc(-1 * var(--space-xxs-1SRICw, 0.4rem));
  margin-right:0.4rem;
  margin-right:var(--space-xxs-1SRICw, 0.4rem);
}
._button_vjswe_lhxlb_7 > ._icon-right_vjswe_lhxlb_328:not(#\9){
  position:relative;
  right:calc(-1 * 0.4rem);
  right:calc(-1 * var(--space-xxs-1SRICw, 0.4rem));
  margin-left:0.4rem;
  margin-left:var(--space-xxs-1SRICw, 0.4rem);
}
._button_vjswe_lhxlb_7._button-no-text_vjswe_lhxlb_312 > ._icon_vjswe_lhxlb_323:not(#\9){
  margin-right:auto;
  margin-left:auto;
  right:0;
  left:0;
}