:root {
  --button-padding: 8px 16px;
  --button-min-height: 40px;
  --button-size: 14px;
  --button-border-color: rgba(255, 255, 255, 0);
  --button-background-color: rgba(255, 255, 255, 0);
  --button-color: #363636;
  --button-border-radius: 4px;
  --button-icon-color: var(--button-color);
}

.button-component button {
  width: 100%;
  justify-content: center;
}

.button-component--fill {
  flex: 1 1 auto;
}

.button.ui-widget,
.button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  min-height: var(--button-min-height);
  font-size: var(--button-size);
  background: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--button-color);
  cursor: pointer;
  transition: 0.2s;
  box-sizing: border-box;
  user-select: none;
}

.button.button--secondary:is(:disabled, .is-disabled),
.button:is(:disabled, .is-disabled) {
  --button-border-color: rgba(22, 22, 22, 0.07);
  --button-background-color: rgba(22, 22, 22, 0.07);
  --button-color: #16161670;
  pointer-events: none;
}

.button:hover {
  text-decoration: none;
}

.button .icon:first-child {
  margin-top: -8px;
  margin-bottom: -8px;
}

.button .icon:not(:first-child:last-child) {
  margin-left: -8px;
}

/* Icon. */
.button--icon {
  display: flex;
  gap: 16px;
}

.button__icon {
  display: inline-block;
  color: var(--button-icon-color);
  translate: -50% 0;
}

/* Size. */
.button--big {
  --button-padding: 8px 16px;
  --button-size: 14px;
  --button-min-height: 48px;
}

.button--middle {
  --button-padding: 6px 12px;
  --button-size: 14px;
  --button-min-height: 32px;
}

.button--small {
  --button-padding: 4px 8px;
  --button-size: 12px;
  --button-min-height: 24px;
}

/* Rounded. */
.button--rounded-none {
  --button-border-radius: 0;
}

.button--rounded-small {
  --button-border-radius: 4px;
}

.button--rounded-middle {
  --button-border-radius: 8px;
}

.button--rounded-pull {
  --button-border-radius: 50rem;
}

.button--rounded-circle {
  --button-border-radius: 50rem;
  --button-padding: 0;
  aspect-ratio: 1/1;
  justify-content: center;
}

/* Primary. */
.button,
.button--primary {
  --button-border-color: #2060A5;
  --button-background-color: #2060A5;
  --button-color: #FFF;
}

.button:is(:hover, :focus),
.button--primary:is(:hover, :focus) {
  --button-border-color: #1A5696;
  --button-background-color: #1A5696;
}

.button:active,
.button--primary:active {
  --button-border-color: #5C6F7B;
  --button-background-color: #5C6F7B;
}

/* Secondary */
.button--secondary {
  --button-background-color: #fff;
}

.button--secondary:is(:hover, :focus) {
  --button-background-color: #fff;
}

/* Tag. */
.button--outline,
.button--tag {
  --button-border-color: #D4D4D4;
  --button-background-color: #fff0;
  --button-color: #363636;
}

.button--outline:is(:hover, :focus),
.button--outline:active,
.button--tag:is(:hover, :focus),
.button--tag:active {
  --button-border-color: #E5E5E5;
  --button-background-color: rgba(22, 22, 22, 0.03);
  --button-color: #363636;
}

.button--tag.button--selected {
  --button-background-color: #e5e5e5;
}

/* Danger. */
.button--danger {
  --button-border-color: #FF4D50;
  --button-background-color: #FF4D50;
  --button-color: #FFF;
}

.button--danger:is(:hover, :focus) {
  --button-border-color: #F37174;
  --button-background-color: #F37174;
}

.button--danger:active {
  --button-border-color: #F37174;
  --button-background-color: #F37174;
}

/* Logout. */
.button--logout {
  --button-border-color: #16161608;
  --button-background-color: #16161608;
  --button-color: #FFF;
  --button-padding: 0;
  --button-border-radius: 50rem;
}

.button--logout:is(:hover, :focus) {
  --button-border-color: #16161612;
  --button-background-color: #16161612;
}

.button--logout:active {
  --button-border-color: #16161612;
  --button-background-color: #16161612;
}

/* Submit. */
.button--submit {
  --button-border-radius: 8px;
}

/* Cancel. */
.button--cancel {
  --button-border-color: #d4d4d4;
  --button-background-color: #fff0;
  --button-color: #363636;
  --button-border-radius: 8px;
}

.button--cancel:is(:hover, :focus) {
  --button-border-color: #2CB6F1;
  --button-background-color: #fff0;
  --button-color: #2CB6F1;
}

.button--cancel:active {
  --button-border-color: #5C6F7B;
  --button-background-color: #16161608;
  --button-color: #5C6F7B;
}

/* Link. */
.button--link {
  --button-border-color: #fff0;
  --button-background-color: #fff0;
  --button-color: #363636;
  --button-border-radius: 8px;
}

.button--link:is(:hover, :focus) {
  --button-border-color: #fff0;
  --button-background-color: #fff0;
  --button-color: #2060A5;
}

.button--link:active {
  --button-border-color: #16161608;
  --button-background-color: #16161608;
  --button-color: #2060A5;
}