.x-button {
  /* * Base */
  --x-button-spacing-x: 1.5rem;
  --x-button-size-y: 4.375rem; /* 70px */
  --x-button-size-x: auto;
  --x-button-border-enabled: 0.125rem transparent #fff;
  --x-button-border-hovered: 0.125rem transparent #fff;
  --x-button-border-disabled: 0.125rem transparent #fff;
  --x-button-label-line-height: var(--x-button-icon-size-y);
  --x-button-label-font-size: 1.125rem;
  --x-button-label-color-enabled: #fefefe;
  --x-button-label-color-hovered: var(--m-color-secondary);
  --x-button-label-color-disabled: #ddd;
  --x-button-icon-spacing-x: 0.75rem;
  --x-button-icon-size-y: 1.625rem;
  --x-button-icon-color-enabled: var(--m-color-primary);
  --x-button-icon-color-hovered: var(--m-color-secondary);
  --x-button-icon-color-disabled: #ddd;
  --x-button-background-enabled: none;
  --x-button-background-hovered: none;
  --x-button-background-disabled: #777;

  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  text-decoration: none;

  gap: var(--x-button-icon-spacing-x);
  height: var(--x-button-size-y);
  width: var(--x-button-size-x);
  padding: 0 var(--x-button-spacing-x);
  border: var(--x-button-border-enabled);
  color: var(--x-button-label-color-enabled);
  font-size: var(--x-button-label-font-size);
  line-height: var(--x-button-label-line-height);
  background-color: var(--x-button-background-enabled);
}
.x-button:hover {
  color: var(--x-button-label-color-hovered);
  border: var(--x-button-border-hovered);
  background-color: var(--x-button-background-hovered);
}
.x-button__icon {
  color: var(--x-button-icon-color-enabled);
}
.x-button__icon svg {
  height: var(--x-button-icon-size-y);
  stroke: currentColor;
  transition: all 0.3s ease-in-out;
}
.x-button:hover .x-button__icon {
  color: var(--x-button-icon-color-hovered);
}
.x-button[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: fill;
  color: var(--x-button-label-color-disabled);
  border: var(--x-button-border-disabled);
  background-color: var(--x-button-background-disabled);
}
.x-button[aria-disabled="true"]:active {
  pointer-events: none;
}
.x-button[aria-disabled="true"] .x-button__icon {
  color: var(--x-button-icon-color-disabled);
}
.x-button[aria-disabled="true"]:hover .x-button__icon {
  color: var(--x-button-icon-color-disabled);
}

/* * Button types */
/* ** Primary */
.x-button.is-primary {
  --x-button-icon-size-y: 1.875rem;

  background-image: linear-gradient(90deg, var(--m-color-primary) 50%, var(--m-color-secondary) 0);
  background-size: 201% 100%;
  background-position: 100% 100%;
  min-width: min(15.625rem, 100%); /* 250px */
}
.x-button.is-primary:hover {
  background-position: 0 100%;
}
.x-button.is-primary[aria-disabled="true"] {
  background-image: none;
}
/* ** Primary inverted */
.x-button.is-primary-inverted {
  --x-button-label-color-enabled: var(--m-color-black);
  --x-button-label-color-hovered: var(--m-color-white);
  --x-button-icon-color-enabled: var(--m-color-secondary);
  --x-button-icon-color-hovered: var(--m-color-primary);

  min-width: 15.625rem; /* 250px */
  background-image: linear-gradient(90deg, var(--m-color-secondary) 50%, var(--m-color-white) 0);
  background-size: 201% 100%;
  background-position: 100% 100%;
}
.x-button.is-primary-inverted:hover {
  background-position: 0 100%;
}
/* ** Secondary */
.x-button.is-secondary {
  --x-button-label-color-enabled: #444;
  --x-button-label-color-hovered: #222;
  --x-button-border-enabled: 0.125rem solid #aaa;
  --x-button-border-hovered: 0.125rem solid #777;
  --x-button-border-disabled: 0.125rem solid #aaa;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;
  --x-button-background-enabled: var(--m-color-body-variant);
  --x-button-background-hovered: var(--m-color-body);
  --x-button-background-disabled: #ddd;

  min-width: min(15.625rem, 100%); /* 250px */
}
/* ** Secondary inverted */
.x-button.is-secondary-inverted {
  --x-button-label-color-enabled: #444;
  --x-button-label-color-hovered: #222;
  --x-button-border-enabled: 0.125rem solid #aaa;
  --x-button-border-hovered: 0.125rem solid #777;
  --x-button-border-disabled: 0.125rem solid #aaa;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;
  --x-button-background-enabled: transparent;
  --x-button-background-hovered: var(--m-color-body);
  --x-button-background-disabled: #ddd;

  min-width: min(15.625rem, 100%); /* 250px */
}
/* ** Tertiary */
.x-button.is-tertiary {
  --x-button-label-color-enabled: #444;
  --x-button-label-color-hovered: #222;
  --x-button-border-enabled: 0.125rem solid #aaa;
  --x-button-border-hovered: 0.125rem solid #777;
  --x-button-border-disabled: 0.125rem solid #aaa;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;

  background: none;
}
/* ** Tab */
.x-button.is-tab {
  --x-button-label-color-enabled: #444;
  --x-button-label-color-hovered: #222;
  --x-button-border-enabled: 0.125rem solid #f3f3f3;
  --x-button-border-hovered: 0.125rem solid var(--m-color-primary-variant-hovered);
  --x-button-border-disabled: 0.125rem solid #aaa;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;

  background-image: linear-gradient(90deg, var(--m-color-primary-variant-hovered) 50%, var(--m-color-white) 0);
  background-size: 201% 100%;
  background-position: 100% 100%;
}
.x-button.is-tab:hover {
  background-position: 0 102%;
}
/* ** Elevated */
.x-button.is-elevated {
  --x-button-label-color-enabled: #444;
  --x-button-label-color-hovered: #222;
  --x-button-border-enabled: none;
  --x-button-border-hovered: none;
  --x-button-border-disabled: none;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;

  background-color: var(--m-color-white);
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.3125rem;
}
.x-button.is-elevated:hover {
  box-shadow: 0 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.1);
}
/* ** Search */
.x-button.is-search {
  --x-button-spacing-x: 0;
  --x-button-size-x: 5.625rem;
  --x-button-size-y: 5.625rem;
  --x-button-icon-size-y: 2.5rem;
  --x-button-icon-color-enabled: #444;
  --x-button-icon-color-hovered: #222;

  background-color: var(--m-color-primary-variant);
  box-shadow: 0.25rem 0.75rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.13)
}
.x-button.is-search:hover {
  background-color: var(--m-color-primary-variant-hovered);
}
/* ** Labeled icon */
.x-button.is-labeled-icon {
  --x-button-icon-size-y: 1.25rem;
  --x-button-icon-color-enabled: var(--m-color-secondary);

  /* display: flex; */
  gap: 0.0625rem;
  width: unset;
  padding: 0;
  background-color: var(--m-color-secondary);
}
.x-button.is-labeled-icon .x-button__icon {
  flex-shrink: 0;
  width: var(--x-button-size-y);
  line-height: var(--x-button-size-y);
  background-color: var(--m-color-primary);
  text-align: center;
  transition: inherit;
}
.x-button.is-labeled-icon:hover .x-button__icon {
  background-color: var(--m-color-primary-hovered);
}
.x-button.is-labeled-icon .x-button__label {
  flex-shrink: 0;
  padding: 0 var(--x-button-spacing-x);
  line-height: var(--x-button-size-y);
  background-image: linear-gradient(90deg, var(--m-color-primary-hovered) 50%, var(--m-color-secondary) 0);
  background-size: 200% 100%;
  background-position: 100% 100%;
  color: var(--x-button-label-color-enabled);
  transition: inherit;
}
.x-button.is-labeled-icon:hover .x-button__label {
  color: var(--x-button-label-color-hovered);
  background-position: 0 100%;
}
.x-button.is-labeled-icon svg,
.x-button.is-labeled-icon:hover svg {
  stroke: var(--x-button-icon-color-enabled);
}

/* * Button sizes */
/* ** Default is the base size */
/* ... */
/* ** Small  */
.x-button.is-small {
  --x-button-spacing-x: 1rem;
  --x-button-icon-spacing-x: 0.5rem;
  --x-button-size-y: 2.5rem;
  --x-button-label-font-size: 0.875rem;
  --x-button-icon-size-y: 1.125rem;
}
/* ** Form  */
.x-button.is-in-form {
  --x-button-spacing-x: 1.25rem;
  --x-button-size-y: 3.125rem;
  --x-button-icon-size-y: 1.125rem;

  min-width: auto;
}

/* ** Inline icon */
.x-button.is-icon.is-inline {
  --x-button-spacing-x: 0;
  --x-button-size-y: 1em;
  --x-button-icon-size-y: 1em;
  --x-button-icon-color-enabled: inherit;
}