assets/css/_feather-component-button.scss

/*! Copyright 2022 Twitter Inc. All rights reserved. */
/* @generated */
/* Button groups */
.ButtonGroup {
  display: inline-block;
  vertical-align: middle;
}
.ButtonGroup > .Button {
  position: relative;
  float: left;
  text-align: center;
}
.ButtonGroup > .Button:focus {
  outline: none;
}
.ButtonGroup > .Button {
  z-index: 1;
  transition-property: background-color, border-color;
}
.ButtonGroup > .Button:hover {
  z-index: 2;
}
.ButtonGroup > .Button.is-selected {
  z-index: 3;
}
.ButtonGroup > .Button.is-selected,
.ButtonGroup > .Button.is-selected:visited {
  background-color: var(--feather-button-group-selected-background-color);
  border: 1px solid var(--feather-button-group-selected-border-color);
  color: var(--feather-button-group-selected-color);
}
.ButtonGroup > .Button.is-selected:focus,
.ButtonGroup > .Button.is-selected.is-focus {
  background: var(--feather-button-group-selected-background-color);
  border-color: var(--feather-button-group-selected-border-color);
  color: var(--feather-button-group-selected-color);
}
.ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus),
.ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-group-selected-outline-color-focus), 0 0 2px 3px var(--feather-button-group-selected-outline-color-focus);
}
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup > .Button.is-selected.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-group-selected-outline-color-focus), 0 0 2px 3px var(--feather-button-group-selected-outline-color-focus);
}
.ButtonGroup > .Button.is-selected:hover,
.ButtonGroup > .Button.is-selected.is-hover {
  background-color: var(--feather-button-group-selected-background-color-hover);
  border-color: var(--feather-button-group-selected-border-color-hover);
  color: var(--feather-button-group-selected-color);
}
.ButtonGroup > .Button.is-selected:active,
.ButtonGroup > .Button.is-selected.is-active {
  background-color: var(--feather-button-group-selected-background-color-active);
  border-color: var(--feather-button-group-selected-border-color-active);
  color: var(--feather-button-group-selected-color);
}
.ButtonGroup > .Button.is-selected[disabled],
.ButtonGroup > .Button.is-selected.is-disabled,
fieldset[disabled] .ButtonGroup > .Button.is-selected {
  background-color: var(--feather-button-group-selected-background-color);
  border-color: var(--feather-button-group-selected-border-color);
  box-shadow: none;
}
.ButtonGroup > .Button:focus:not(.is-mouseFocus),
.ButtonGroup > .Button.is-focus:not(.is-mouseFocus) {
  z-index: 4;
}
.ButtonGroup > .Button + .Button {
  margin-left: -1px;
}
.ButtonGroup > .Button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.ButtonGroup > .Button:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.ButtonGroup > .Button:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
/* Sizing */
/* Variants */
.ButtonGroup--primary > .Button + .Button {
  margin-left: 1px;
}
.ButtonGroup--justified {
  display: flex;
  width: 100%;
}
.ButtonGroup--justified > .Button {
  flex: 1;
}
.Button .Icon {
  line-height: 1;
  vertical-align: -1px;
}
.Button--large .Icon {
  vertical-align: -2px;
}
.ButtonGroup .Icon {
  line-height: 1;
  vertical-align: -1px;
}
.ButtonGroup--large .Icon {
  vertical-align: -2px;
}
.Button > .Icon--caretDown {
  margin: 0 var(--feather-form-control-default-adornment-margin);
}
.Button--xsmall > .Icon--caretDown {
  margin: 0 var(--feather-form-control-xsmall-adornment-margin);
}
.Button--small > .Icon--caretDown {
  margin: 0 var(--feather-form-control-small-adornment-margin);
}
.Button--large > .Icon--caretDown {
  margin: 0 var(--feather-form-control-large-adornment-margin);
}
.Button > .Icon--caretDown {
  float: right;
  margin-right: 0;
  line-height: inherit;
}
.Button-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Button-adornment {
  margin: 0 var(--feather-form-control-default-adornment-margin);
  flex: 0 0 auto;
}
.Button--xsmall .Button-adornment,
.ButtonGroup--xsmall .Button-adornment {
  margin: 0 var(--feather-form-control-xsmall-adornment-margin);
}
.Button--small .Button-adornment,
.ButtonGroup--small .Button-adornment {
  margin: 0 var(--feather-form-control-small-adornment-margin);
}
.Button--large .Button-adornment,
.ButtonGroup--large .Button-adornment {
  margin: 0 var(--feather-form-control-large-adornment-margin);
}
.Button-adornment:only-child {
  margin-right: 0;
  margin-left: 0;
}
html:not([dir='rtl']) .Button:not([dir='rtl']) .Button-adornment:first-child,
.Button[dir='ltr'] .Button-adornment:first-child {
  margin-left: 0;
}
html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:first-child,
.Button[dir='rtl'] .Button-adornment:first-child {
  margin-right: 0;
}
html:not([dir='rtl']) .Button:not([dir='rtl']) .Button-adornment:last-child,
.Button[dir='ltr'] .Button-adornment:last-child {
  margin-right: 0;
}
html[dir='rtl'] .Button:not([dir='ltr']) .Button-adornment:last-child,
.Button[dir='rtl'] .Button-adornment:last-child {
  margin-left: 0;
}
/* Category labels */
.Button--withCategoryLabel .Button-label {
  font-weight: 400;
}
.Button-categoryLabel {
  font-weight: 700;
}
.Button {
  --feather-button-background-color-active: rgba(55, 67, 77, 0.2);
  --feather-button-background-color: white;
  --feather-button-background-color-hover: var(--tw-color-gray-100);
  --feather-button-border-color-active: rgba(55, 67, 77, 0);
  --feather-button-border-color: var(--tw-color-gray-200);
  --feather-button-border-color-hover: var(--feather-button-border-color);
  --feather-button-color: var(--tw-color-text-primary);
  --feather-button-outline-color-focus: rgba(29, 155, 240, 0.5);
  --feather-button-primary-background-color-active: #3f4347;
  --feather-button-primary-background-color: var(--tw-color-gray-1100);
  --feather-button-primary-background-color-hover: #272b30;
  --feather-button-primary-border-color-active: var(--feather-button-primary-background-color-active);
  --feather-button-primary-border-color: var(--feather-button-primary-background-color);
  --feather-button-primary-border-color-hover: var(--feather-button-primary-background-color-hover);
  --feather-button-primary-color: white;
  --feather-button-primary-outline-color-focus: var(--feather-button-outline-color-focus);
  --feather-button-brand-primary-background-color-active: #177cc0;
  --feather-button-brand-primary-background-color: var(--tw-color-blue-500);
  --feather-button-brand-primary-background-color-hover: #1a8cd8;
  --feather-button-brand-primary-border-color-active: #177cc0;
  --feather-button-brand-primary-border-color: var(--feather-button-brand-primary-background-color);
  --feather-button-brand-primary-border-color-hover: #1a8cd8;
  --feather-button-brand-primary-color: white;
  --feather-button-brand-primary-outline-color-focus: var(--feather-button-outline-color-focus);
  --feather-button-danger-primary-background-color-active: #c31a25;
  --feather-button-danger-primary-background-color: var(--tw-color-red-500);
  --feather-button-danger-primary-background-color-hover: #dc1e29;
  --feather-button-danger-primary-border-color-active: var(--feather-button-danger-primary-background-color-active);
  --feather-button-danger-primary-border-color: var(--feather-button-danger-primary-background-color);
  --feather-button-danger-primary-border-color-hover: var(--feather-button-danger-primary-background-color-hover);
  --feather-button-danger-primary-color: white;
  --feather-button-danger-primary-outline-color-focus: var(--tw-color-red-500);
  --feather-button-danger-secondary-background-color-active: rgba(244, 33, 46, 0.2);
  --feather-button-danger-secondary-background-color: white;
  --feather-button-danger-secondary-background-color-hover: rgba(244, 33, 46, 0.1);
  --feather-button-danger-secondary-border-color-active: rgba(244, 33, 46, 0);
  --feather-button-danger-secondary-border-color: var(--tw-color-red-100);
  --feather-button-danger-secondary-border-color-hover: rgba(244, 33, 46, 0.1);
  --feather-button-danger-secondary-color: var(--tw-color-red-500);
  --feather-button-danger-secondary-outline-color-focus: rgba(244, 33, 46, 0.5);
  --feather-button-link-color: var(--tw-color-text-primary);
  --feather-button-link-font-weight: var(--feather-font-weight-bold);
  --feather-button-danger-link-color: var(--tw-color-red-500);
  --feather-button-group-selected-background-color-active: var(--feather-button-primary-background-color-active);
  --feather-button-group-selected-background-color: var(--feather-button-primary-background-color);
  --feather-button-group-selected-background-color-hover: var(--feather-button-primary-background-color-hover);
  --feather-button-group-selected-border-color-active: var(--feather-button-primary-border-color-active);
  --feather-button-group-selected-border-color: var(--feather-button-primary-border-color);
  --feather-button-group-selected-border-color-hover: var(--feather-button-primary-border-color-hover);
  --feather-button-group-selected-color: var(--feather-button-primary-color);
  --feather-button-group-selected-outline-color-focus: var(--feather-button-primary-outline-color-focus);
}
.Button {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition-property: box-shadow, background-color, border-color;
  text-align: center;
}
.Button:focus {
  outline: none;
}
.Button:-moz-focusring,
.Button[type='button']:-moz-focusring,
.Button[type='reset']:-moz-focusring,
.Button[type='submit']:-moz-focusring {
  outline: none;
}
.Button,
.Button:visited,
.Button.is-visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-family: var(--feather-font-family-base);
  font-weight: 700;
}
.Button:focus,
.Button.is-focus {
  text-decoration: none;
}
.Button:focus:not(.is-mouseFocus),
.Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px rgba(29, 155, 240, 0.5), 0 0 2px 3px rgba(29, 155, 240, 0.5);
}
.Button:hover,
.Button.is-hover {
  text-decoration: none;
}
.Button[disabled],
.Button.is-disabled,
fieldset[disabled] .Button {
  cursor: default;
  opacity: 0.5;
  box-shadow: none;
}
a.Button.is-disabled,
fieldset[disabled] a.Button {
  pointer-events: none;
}
.Button[type='button'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
/* Variants */
.Button,
.Button:visited {
  background-color: var(--feather-button-background-color);
  border: 1px solid var(--feather-button-border-color);
  color: var(--feather-button-color);
}
.Button:focus,
.Button.is-focus {
  background: var(--feather-button-background-color);
  border-color: var(--feather-button-border-color);
  color: var(--feather-button-color);
}
.Button:focus:not(.is-mouseFocus),
.Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-outline-color-focus), 0 0 2px 3px var(--feather-button-outline-color-focus);
}
.u-featherBackgroundDark .Button:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-outline-color-focus), 0 0 2px 3px var(--feather-button-outline-color-focus);
}
.Button:hover,
.Button.is-hover {
  background-color: var(--feather-button-background-color-hover);
  border-color: var(--feather-button-border-color-hover);
  color: var(--feather-button-color);
}
.Button:active,
.Button.is-active {
  background-color: var(--feather-button-background-color-active);
  border-color: var(--feather-button-border-color-active);
  color: var(--feather-button-color);
}
.Button[disabled],
.Button.is-disabled,
fieldset[disabled] .Button {
  background-color: var(--feather-button-background-color);
  border-color: var(--feather-button-border-color);
  box-shadow: none;
}
.Button.Button--primary,
.Button.Button--primary:visited,
.ButtonGroup--primary > .Button,
.ButtonGroup--primary > .Button:visited {
  background-color: var(--feather-button-primary-background-color);
  border: 1px solid var(--feather-button-primary-border-color);
  color: var(--feather-button-primary-color);
}
.Button.Button--primary:focus,
.Button.Button--primary.is-focus,
.ButtonGroup--primary > .Button:focus,
.ButtonGroup--primary > .Button.is-focus {
  background: var(--feather-button-primary-background-color);
  border-color: var(--feather-button-primary-border-color);
  color: var(--feather-button-primary-color);
}
.Button.Button--primary:focus:not(.is-mouseFocus),
.Button.Button--primary.is-focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button:focus:not(.is-mouseFocus),
.ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-primary-outline-color-focus);
}
.u-featherBackgroundDark .Button.Button--primary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--primary.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .ButtonGroup--primary > .Button.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-primary-outline-color-focus);
}
.Button.Button--primary:hover,
.Button.Button--primary.is-hover,
.ButtonGroup--primary > .Button:hover,
.ButtonGroup--primary > .Button.is-hover {
  background-color: var(--feather-button-primary-background-color-hover);
  border-color: var(--feather-button-primary-border-color-hover);
  color: var(--feather-button-primary-color);
}
.Button.Button--primary:active,
.Button.Button--primary.is-active,
.ButtonGroup--primary > .Button:active,
.ButtonGroup--primary > .Button.is-active {
  background-color: var(--feather-button-primary-background-color-active);
  border-color: var(--feather-button-primary-border-color-active);
  color: var(--feather-button-primary-color);
}
.Button.Button--primary[disabled],
.Button.Button--primary.is-disabled,
fieldset[disabled] .Button.Button--primary,
.ButtonGroup--primary > .Button[disabled],
.ButtonGroup--primary > .Button.is-disabled,
fieldset[disabled] .ButtonGroup--primary > .Button {
  background-color: var(--feather-button-primary-background-color);
  border-color: var(--feather-button-primary-border-color);
  box-shadow: none;
}
.Button.Button--brandPrimary,
.Button.Button--brandPrimary:visited {
  background-color: var(--feather-button-brand-primary-background-color);
  border: 1px solid var(--feather-button-brand-primary-border-color);
  color: var(--feather-button-brand-primary-color);
}
.Button.Button--brandPrimary:focus,
.Button.Button--brandPrimary.is-focus {
  background: var(--feather-button-brand-primary-background-color);
  border-color: var(--feather-button-brand-primary-border-color);
  color: var(--feather-button-brand-primary-color);
}
.Button.Button--brandPrimary:focus:not(.is-mouseFocus),
.Button.Button--brandPrimary.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-brand-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-brand-primary-outline-color-focus);
}
.u-featherBackgroundDark .Button.Button--brandPrimary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--brandPrimary.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-brand-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-brand-primary-outline-color-focus);
}
.Button.Button--brandPrimary:hover,
.Button.Button--brandPrimary.is-hover {
  background-color: var(--feather-button-brand-primary-background-color-hover);
  border-color: var(--feather-button-brand-primary-border-color-hover);
  color: var(--feather-button-brand-primary-color);
}
.Button.Button--brandPrimary:active,
.Button.Button--brandPrimary.is-active {
  background-color: var(--feather-button-brand-primary-background-color-active);
  border-color: var(--feather-button-brand-primary-border-color-active);
  color: var(--feather-button-brand-primary-color);
}
.Button.Button--brandPrimary[disabled],
.Button.Button--brandPrimary.is-disabled,
fieldset[disabled] .Button.Button--brandPrimary {
  background-color: var(--feather-button-brand-primary-background-color);
  border-color: var(--feather-button-brand-primary-border-color);
  box-shadow: none;
}
.Button.Button--dangerPrimary,
.Button.Button--danger,
.Button.Button--dangerPrimary:visited,
.Button.Button--danger:visited {
  background-color: var(--feather-button-danger-primary-background-color);
  border: 1px solid var(--feather-button-danger-primary-border-color);
  color: var(--feather-button-danger-primary-color);
}
.Button.Button--dangerPrimary:focus,
.Button.Button--danger:focus,
.Button.Button--dangerPrimary.is-focus,
.Button.Button--danger.is-focus {
  background: var(--feather-button-danger-primary-background-color);
  border-color: var(--feather-button-danger-primary-border-color);
  color: var(--feather-button-danger-primary-color);
}
.Button.Button--dangerPrimary:focus:not(.is-mouseFocus),
.Button.Button--danger:focus:not(.is-mouseFocus),
.Button.Button--dangerPrimary.is-focus:not(.is-mouseFocus),
.Button.Button--danger.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-danger-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-primary-outline-color-focus);
}
.u-featherBackgroundDark .Button.Button--dangerPrimary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--danger:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--dangerPrimary.is-focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--danger.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-danger-primary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-primary-outline-color-focus);
}
.Button.Button--dangerPrimary:hover,
.Button.Button--danger:hover,
.Button.Button--dangerPrimary.is-hover,
.Button.Button--danger.is-hover {
  background-color: var(--feather-button-danger-primary-background-color-hover);
  border-color: var(--feather-button-danger-primary-border-color-hover);
  color: var(--feather-button-danger-primary-color);
}
.Button.Button--dangerPrimary:active,
.Button.Button--danger:active,
.Button.Button--dangerPrimary.is-active,
.Button.Button--danger.is-active {
  background-color: var(--feather-button-danger-primary-background-color-active);
  border-color: var(--feather-button-danger-primary-border-color-active);
  color: var(--feather-button-danger-primary-color);
}
.Button.Button--dangerPrimary[disabled],
.Button.Button--danger[disabled],
.Button.Button--dangerPrimary.is-disabled,
.Button.Button--danger.is-disabled,
fieldset[disabled] .Button.Button--dangerPrimary,
fieldset[disabled] .Button.Button--danger {
  background-color: var(--feather-button-danger-primary-background-color);
  border-color: var(--feather-button-danger-primary-border-color);
  box-shadow: none;
}
.Button.Button--dangerSecondary,
.Button.Button--dangerSecondary:visited {
  background-color: var(--feather-button-danger-secondary-background-color);
  border: 1px solid var(--feather-button-danger-secondary-border-color);
  color: var(--feather-button-danger-secondary-color);
}
.Button.Button--dangerSecondary:focus,
.Button.Button--dangerSecondary.is-focus {
  background: var(--feather-button-danger-secondary-background-color);
  border-color: var(--feather-button-danger-secondary-border-color);
  color: var(--feather-button-danger-secondary-color);
}
.Button.Button--dangerSecondary:focus:not(.is-mouseFocus),
.Button.Button--dangerSecondary.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--feather-button-danger-secondary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-secondary-outline-color-focus);
}
.u-featherBackgroundDark .Button.Button--dangerSecondary:focus:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--dangerSecondary.is-focus:not(.is-mouseFocus) {
  box-shadow: 0 0 0 1px black, 0 0 0 3px var(--feather-button-danger-secondary-outline-color-focus), 0 0 2px 3px var(--feather-button-danger-secondary-outline-color-focus);
}
.Button.Button--dangerSecondary:hover,
.Button.Button--dangerSecondary.is-hover {
  background-color: var(--feather-button-danger-secondary-background-color-hover);
  border-color: var(--feather-button-danger-secondary-border-color-hover);
  color: var(--feather-button-danger-secondary-color);
}
.Button.Button--dangerSecondary:active,
.Button.Button--dangerSecondary.is-active {
  background-color: var(--feather-button-danger-secondary-background-color-active);
  border-color: var(--feather-button-danger-secondary-border-color-active);
  color: var(--feather-button-danger-secondary-color);
}
.Button.Button--dangerSecondary[disabled],
.Button.Button--dangerSecondary.is-disabled,
fieldset[disabled] .Button.Button--dangerSecondary {
  background-color: var(--feather-button-danger-secondary-background-color);
  border-color: var(--feather-button-danger-secondary-border-color);
  box-shadow: none;
}
.Button.Button--link {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: none;
  border-radius: var(--feather-form-control-default-border-radius);
  box-shadow: none;
  color: var(--feather-button-link-color);
  cursor: pointer;
  font-family: var(--feather-font-family-base);
  font-weight: var(--feather-button-link-font-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-1);
  text-underline-offset: var(--feather-space-4);
}
.Button.Button--link:hover,
.Button.Button--link.is-hover,
.Button.Button--link:focus,
.Button.Button--link.is-focus,
.Button.Button--link:active,
.Button.Button--link.is-active,
.Button.Button--link.is-focus.is-active,
.Button.Button--link:focus:active:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--link:hover,
.u-featherBackgroundDark .Button.Button--link.is-hover,
.u-featherBackgroundDark .Button.Button--link:focus,
.u-featherBackgroundDark .Button.Button--link.is-focus,
.u-featherBackgroundDark .Button.Button--link:active,
.u-featherBackgroundDark .Button.Button--link.is-active,
.u-featherBackgroundDark .Button.Button--link.is-focus.is-active,
.u-featherBackgroundDark .Button.Button--link:focus:active:not(.is-mouseFocus) {
  background: transparent;
  border-color: transparent;
  color: var(--feather-button-link-color);
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-2);
}
.Button.Button--link[disabled],
.Button.Button--link.is-disabled,
fieldset[disabled] .Button.Button--link {
  cursor: default;
  opacity: 0.5;
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-1);
}
.Button.Button--dangerLink {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: none;
  border-radius: var(--feather-form-control-default-border-radius);
  box-shadow: none;
  color: var(--feather-button-danger-link-color);
  cursor: pointer;
  font-family: var(--feather-font-family-base);
  font-weight: var(--feather-button-link-font-weight);
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-1);
  text-underline-offset: var(--feather-space-4);
}
.Button.Button--dangerLink:hover,
.Button.Button--dangerLink.is-hover,
.Button.Button--dangerLink:focus,
.Button.Button--dangerLink.is-focus,
.Button.Button--dangerLink:active,
.Button.Button--dangerLink.is-active,
.Button.Button--dangerLink.is-focus.is-active,
.Button.Button--dangerLink:focus:active:not(.is-mouseFocus),
.u-featherBackgroundDark .Button.Button--dangerLink:hover,
.u-featherBackgroundDark .Button.Button--dangerLink.is-hover,
.u-featherBackgroundDark .Button.Button--dangerLink:focus,
.u-featherBackgroundDark .Button.Button--dangerLink.is-focus,
.u-featherBackgroundDark .Button.Button--dangerLink:active,
.u-featherBackgroundDark .Button.Button--dangerLink.is-active,
.u-featherBackgroundDark .Button.Button--dangerLink.is-focus.is-active,
.u-featherBackgroundDark .Button.Button--dangerLink:focus:active:not(.is-mouseFocus) {
  background: transparent;
  border-color: transparent;
  color: var(--feather-button-danger-link-color);
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-2);
}
.Button.Button--dangerLink[disabled],
.Button.Button--dangerLink.is-disabled,
fieldset[disabled] .Button.Button--dangerLink {
  cursor: default;
  opacity: 0.5;
  text-decoration: underline;
  text-decoration-thickness: var(--feather-space-1);
}
/* Sizes */
.Button {
  padding: 0 var(--feather-space-16);
  border-radius: var(--feather-form-control-default-height);
  font-size: var(--feather-form-control-default-font-size);
  height: var(--feather-form-control-default-height);
  line-height: calc(var(--feather-form-control-default-height) - (var(--feather-border-width-small-experimental) * 2));
}
.Button--xsmall,
.ButtonGroup--xsmall > .Button {
  padding: 0 var(--feather-space-12);
  border-radius: var(--feather-form-control-xsmall-height);
  font-size: var(--feather-font-size-subtext-1);
  height: var(--feather-form-control-xsmall-height);
  line-height: calc(var(--feather-form-control-xsmall-height) - (var(--feather-border-width-small-experimental) * 2));
}
.Button--small,
.ButtonGroup--small > .Button {
  padding: 0 var(--feather-space-16);
  border-radius: var(--feather-form-control-small-height);
  font-size: var(--feather-font-size-subtext-1);
  height: var(--feather-form-control-small-height);
  line-height: calc(var(--feather-form-control-small-height) - (var(--feather-border-width-small-experimental) * 2));
}
.Button--large,
.ButtonGroup--large > .Button {
  padding: 0 var(--feather-space-24);
  border-radius: var(--feather-form-control-large-height);
  font-size: var(--feather-font-size-body);
  height: var(--feather-form-control-large-height);
  line-height: calc(var(--feather-form-control-large-height) - (var(--feather-border-width-small-experimental) * 2));
}