.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=icon-only]{
  border-radius:var(--radius-button-xs, 4px);
  height:var(--size-button-xs, 24px);
  width:var(--size-button-xs, 24px);
}
.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=icon-only]{
  border-radius:var(--radius-button-s, 4px);
  height:var(--size-button-s, 32px);
  width:var(--size-button-s, 32px);
}
.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=icon-only]{
  border-radius:var(--radius-button-m, 4px);
  height:var(--size-button-m, 40px);
  width:var(--size-button-m, 40px);
}
.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=icon-only]{
  border-radius:var(--radius-button-l, 4px);
  height:var(--size-button-l, 48px);
  width:var(--size-button-l, 48px);
}
.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: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-color:var(--sys-available-complementary, #1c1c24);
}
.button.button{
  background-color:var(--sys-neutral-background2-level, #ffffff);
  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
}
.button.button .icon{
  color:var(--sys-neutral-text-support, #6d707f);
}
@media (hover: hover){
  .button.button:hover{
    background-color:var(--sys-neutral-background2-level, #ffffff);
    box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
  }
  .button.button:hover .icon{
    color:var(--sys-neutral-text-main, #41424e);
  }
}
@media (hover: none) or (hover: hover){
  .button.button:focus-visible{
    background-color:var(--sys-neutral-background2-level, #ffffff);
    box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
  }
  .button.button:focus-visible .icon{
    color:var(--sys-neutral-text-main, #41424e);
  }
  .button.button:active{
    background-color:var(--sys-neutral-background, #eeeff3);
    box-shadow:none;
  }
  .button.button:active .icon{
    color:var(--sys-neutral-text-support, #6d707f);
  }
  .button.button:disabled, .button.button[data-disabled]{
    background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
    box-shadow:none;
  }
  .button.button:disabled .icon, .button.button[data-disabled] .icon{
    color:var(--sys-neutral-text-disabled, #aaaebd);
  }
  .button.button[data-loading]{
    background-color:var(--sys-neutral-background, #eeeff3);
    box-shadow:none;
  }
  .button.button[data-loading] .icon{
    color:var(--sys-neutral-text-main, #41424e);
  }
}