.button[data-size=xs] .label{
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
  font-weight:var(--sans-label-s-font-weight, Semibold);
  line-height:var(--sans-label-s-line-height, 14px);
  font-size:var(--sans-label-s-font-size, 11px);
  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
}
.button[data-size=xs] .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size-icon-container-s, 24px);
  height:var(--size-icon-container-s, 24px);
}
.button[data-size=xs] .icon svg{
  max-width:var(--size-icon-container-s, 24px);
  max-height:var(--size-icon-container-s, 24px);
}
.button[data-size=xs][data-variant=label-only]{
  height:var(--size-button-xs, 24px);
  padding-right:var(--space-button-xs-from-label, 8px);
  padding-left:var(--space-button-xs-from-label, 8px);
  border-radius:var(--radius-button-xs, 4px);
  min-width:var(--size-button-mininal-width-xs, 72px);
}
.button[data-size=xs][data-variant=icon-only]{
  height:var(--size-button-xs, 24px);
  width:var(--size-button-xs, 24px);
  border-radius:var(--radius-button-xs, 4px);
}
.button[data-size=xs][data-variant=icon-after]{
  height:var(--size-button-xs, 24px);
  gap:var(--space-button-xs-gap, 2px);
  padding-right:var(--space-button-xs-from-icon, 4px);
  padding-left:var(--space-button-xs-from-label, 8px);
  border-radius:var(--radius-button-xs, 4px);
  min-width:var(--size-button-mininal-width-xs, 72px);
}
.button[data-size=xs][data-variant=icon-before]{
  height:var(--size-button-xs, 24px);
  gap:var(--space-button-xs-gap, 2px);
  padding-right:var(--space-button-xs-from-label, 8px);
  padding-left:var(--space-button-xs-from-icon, 4px);
  border-radius:var(--radius-button-xs, 4px);
  min-width:var(--size-button-mininal-width-xs, 72px);
}
.button[data-size=s] .label{
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
  font-weight:var(--sans-label-m-font-weight, Semibold);
  line-height:var(--sans-label-m-line-height, 16px);
  font-size:var(--sans-label-m-font-size, 12px);
  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
}
.button[data-size=s] .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size-icon-container-s, 24px);
  height:var(--size-icon-container-s, 24px);
}
.button[data-size=s] .icon svg{
  max-width:var(--size-icon-container-s, 24px);
  max-height:var(--size-icon-container-s, 24px);
}
.button[data-size=s][data-variant=label-only]{
  height:var(--size-button-s, 32px);
  padding-right:var(--space-button-s-from-label, 16px);
  padding-left:var(--space-button-s-from-label, 16px);
  border-radius:var(--radius-button-s, 4px);
  min-width:var(--size-button-mininal-width-s, 96px);
}
.button[data-size=s][data-variant=icon-only]{
  height:var(--size-button-s, 32px);
  width:var(--size-button-s, 32px);
  border-radius:var(--radius-button-s, 4px);
}
.button[data-size=s][data-variant=icon-after]{
  height:var(--size-button-s, 32px);
  gap:var(--space-button-s-gap, 4px);
  padding-right:var(--space-button-s-from-icon, 8px);
  padding-left:var(--space-button-s-from-label, 16px);
  border-width:var(--border-width-button-outline-single, 1px);
  border-radius:var(--radius-button-s, 4px);
  min-width:var(--size-button-mininal-width-s, 96px);
}
.button[data-size=s][data-variant=icon-before]{
  height:var(--size-button-s, 32px);
  gap:var(--space-button-s-gap, 4px);
  padding-right:var(--space-button-s-from-label, 16px);
  padding-left:var(--space-button-s-from-icon, 8px);
  border-radius:var(--radius-button-s, 4px);
  min-width:var(--size-button-mininal-width-s, 96px);
}
.button[data-size=m] .label{
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
  font-weight:var(--sans-label-l-font-weight, Semibold);
  line-height:var(--sans-label-l-line-height, 20px);
  font-size:var(--sans-label-l-font-size, 14px);
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
}
.button[data-size=m] .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size-icon-container-s, 24px);
  height:var(--size-icon-container-s, 24px);
}
.button[data-size=m] .icon svg{
  max-width:var(--size-icon-container-s, 24px);
  max-height:var(--size-icon-container-s, 24px);
}
.button[data-size=m][data-variant=label-only]{
  height:var(--size-button-m, 40px);
  padding-right:var(--space-button-m-from-label, 16px);
  padding-left:var(--space-button-m-from-label, 16px);
  border-radius:var(--radius-button-m, 4px);
  min-width:var(--size-button-mininal-width-m, 120px);
}
.button[data-size=m][data-variant=icon-only]{
  height:var(--size-button-m, 40px);
  width:var(--size-button-m, 40px);
  border-radius:var(--radius-button-m, 4px);
}
.button[data-size=m][data-variant=icon-after]{
  height:var(--size-button-m, 40px);
  gap:var(--space-button-m-gap, 4px);
  padding-right:var(--space-button-m-from-icon, 8px);
  padding-left:var(--space-button-m-from-label, 16px);
  border-radius:var(--radius-button-m, 4px);
  min-width:var(--size-button-mininal-width-m, 120px);
}
.button[data-size=m][data-variant=icon-before]{
  height:var(--size-button-m, 40px);
  gap:var(--space-button-m-gap, 4px);
  padding-right:var(--space-button-m-from-label, 16px);
  padding-left:var(--space-button-m-from-icon, 8px);
  border-radius:var(--radius-button-m, 4px);
  min-width:var(--size-button-mininal-width-m, 120px);
}
.button[data-size=l] .label{
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
  font-weight:var(--sans-label-l-font-weight, Semibold);
  line-height:var(--sans-label-l-line-height, 20px);
  font-size:var(--sans-label-l-font-size, 14px);
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
}
.button[data-size=l] .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size-icon-container-s, 24px);
  height:var(--size-icon-container-s, 24px);
}
.button[data-size=l] .icon svg{
  max-width:var(--size-icon-container-s, 24px);
  max-height:var(--size-icon-container-s, 24px);
}
.button[data-size=l][data-variant=label-only]{
  height:var(--size-button-l, 48px);
  padding-right:var(--space-button-l-from-label, 24px);
  padding-left:var(--space-button-l-from-label, 24px);
  border-radius:var(--radius-button-l, 4px);
  min-width:var(--size-button-mininal-width-l, 144px);
}
.button[data-size=l][data-variant=icon-only]{
  height:var(--size-button-l, 48px);
  width:var(--size-button-l, 48px);
  border-radius:var(--radius-button-l, 4px);
}
.button[data-size=l][data-variant=icon-after]{
  height:var(--size-button-l, 48px);
  gap:var(--space-button-l-gap, 4px);
  padding-right:var(--space-button-l-from-icon, 16px);
  padding-left:var(--space-button-l-from-label, 24px);
  border-radius:var(--radius-button-l, 4px);
  min-width:var(--size-button-mininal-width-l, 144px);
}
.button[data-size=l][data-variant=icon-before]{
  height:var(--size-button-l, 48px);
  gap:var(--space-button-l-gap, 4px);
  padding-right:var(--space-button-l-from-label, 24px);
  padding-left:var(--space-button-l-from-icon, 16px);
  border-radius:var(--radius-button-l, 4px);
  min-width:var(--size-button-mininal-width-l, 144px);
}
.button[data-loading][data-variant=label-only] .icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.button[data-loading][data-variant=label-only] .label{
  opacity:var(--opacity-a0, 0);
}
.button[data-appearance=primary] .label{
  color:var(--sys-primary-accent-default, #389f74);
}
.button[data-appearance=primary] .icon{
  color:var(--sys-primary-accent-default, #389f74);
}
@media (hover: hover){
  .button[data-appearance=primary]:hover .label{
    color:var(--sys-primary-accent-hovered, #37946e);
  }
  .button[data-appearance=primary]:hover .icon{
    color:var(--sys-primary-accent-hovered, #37946e);
  }
}
@media (hover: none) or (hover: hover){
  .button[data-appearance=primary]:focus-visible .label{
    color:var(--sys-primary-accent-hovered, #37946e);
  }
  .button[data-appearance=primary]:focus-visible .icon{
    color:var(--sys-primary-accent-hovered, #37946e);
  }
  .button[data-appearance=primary]:active .label{
    color:var(--sys-primary-accent-pressed, #358561);
  }
  .button[data-appearance=primary]:active .icon{
    color:var(--sys-primary-accent-pressed, #358561);
  }
  .button[data-appearance=primary][data-loading] .label{
    color:var(--sys-primary-accent-pressed, #358561);
  }
  .button[data-appearance=primary][data-loading] .icon{
    color:var(--sys-primary-accent-pressed, #358561);
  }
  .button[data-appearance=primary]:disabled .label, .button[data-appearance=primary][data-disabled] .label{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
  .button[data-appearance=primary]:disabled .icon, .button[data-appearance=primary][data-disabled] .icon{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
}
.button[data-appearance=neutral] .label{
  color:var(--sys-neutral-accent-default, #787b8a);
}
.button[data-appearance=neutral] .icon{
  color:var(--sys-neutral-accent-default, #787b8a);
}
@media (hover: hover){
  .button[data-appearance=neutral]:hover .label{
    color:var(--sys-neutral-accent-hovered, #6d707f);
  }
  .button[data-appearance=neutral]:hover .icon{
    color:var(--sys-neutral-accent-hovered, #6d707f);
  }
}
@media (hover: none) or (hover: hover){
  .button[data-appearance=neutral]:focus-visible .label{
    color:var(--sys-neutral-accent-hovered, #6d707f);
  }
  .button[data-appearance=neutral]:focus-visible .icon{
    color:var(--sys-neutral-accent-hovered, #6d707f);
  }
  .button[data-appearance=neutral]:active .label{
    color:var(--sys-neutral-accent-pressed, #656774);
  }
  .button[data-appearance=neutral]:active .icon{
    color:var(--sys-neutral-accent-pressed, #656774);
  }
  .button[data-appearance=neutral][data-loading] .label{
    color:var(--sys-neutral-accent-pressed, #656774);
  }
  .button[data-appearance=neutral][data-loading] .icon{
    color:var(--sys-neutral-accent-pressed, #656774);
  }
  .button[data-appearance=neutral]:disabled .label, .button[data-appearance=neutral][data-disabled] .label{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
  .button[data-appearance=neutral]:disabled .icon, .button[data-appearance=neutral][data-disabled] .icon{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
}
.button[data-appearance=red] .label{
  color:var(--sys-red-accent-default, #cb3f3e);
}
.button[data-appearance=red] .icon{
  color:var(--sys-red-accent-default, #cb3f3e);
}
@media (hover: hover){
  .button[data-appearance=red]:hover .label{
    color:var(--sys-red-accent-hovered, #bd4844);
  }
  .button[data-appearance=red]:hover .icon{
    color:var(--sys-red-accent-hovered, #bd4844);
  }
}
@media (hover: none) or (hover: hover){
  .button[data-appearance=red]:focus-visible .label{
    color:var(--sys-red-accent-hovered, #bd4844);
  }
  .button[data-appearance=red]:focus-visible .icon{
    color:var(--sys-red-accent-hovered, #bd4844);
  }
  .button[data-appearance=red]:active .label{
    color:var(--sys-red-accent-pressed, #ae514c);
  }
  .button[data-appearance=red]:active .icon{
    color:var(--sys-red-accent-pressed, #ae514c);
  }
  .button[data-appearance=red][data-loading] .label{
    color:var(--sys-red-accent-pressed, #ae514c);
  }
  .button[data-appearance=red][data-loading] .icon{
    color:var(--sys-red-accent-pressed, #ae514c);
  }
  .button[data-appearance=red]:disabled .label, .button[data-appearance=red][data-disabled] .label{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
  .button[data-appearance=red]:disabled .icon, .button[data-appearance=red][data-disabled] .icon{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
}
.button[data-appearance=primary]:focus-visible{
  outline-color:var(--sys-available-complementary, #1c1c24);
}
.button[data-appearance=neutral]:focus-visible{
  outline-color:var(--sys-available-complementary, #1c1c24);
}
.button[data-appearance=red]:focus-visible{
  outline-color:var(--sys-available-complementary, #1c1c24);
}
.button:focus-visible{
  outline-width:var(--border-state-focus-s-border-width, 2px);
  outline-style:var(--border-state-focus-s-border-style, solid);
  outline-color:var(--border-state-focus-s-border-color, );
  outline-offset:var(--spacing-state-focus-offset, 2px);
}