[data-theme="light"] .button,
.button {
  --button-padding-x: .5rem;
  --button-padding-y: .25rem;
  --button-font-size: .95rem;
  --button-font-weight: 400;
  --button-color: #fff;
  --button-border-radius: .25rem;
  --button-line-height: 1.5;
  --button-padding-y: .5rem;
  --button-padding-x: 1rem;

  --button-primary-bg: color-mix(in srgb, var(--color-primary) 90%, #FFF);
  --button-primary-color: #fff;
  --button-primary-hover-bg: color-mix(in srgb, var(--color-primary) 85%, #FFF);
  --button-primary-active-bg: color-mix(in srgb, var(--color-primary) 85%, #000);

  --button-plain-bg: rgba(0,0,0,.1);
  --button-plain-color: #000;
  --button-plain-hover-bg: rgba(0,0,0,.15);

  --button-plain-light-bg: rgba(255,255,255,.1);
  --button-plain-light-color: #fff;
  --button-plain-light-hover-bg: rgba(255,255,255,.15);

  --button-highlight-bg: #f9d23c;
  --button-highlight-color: #000;
  --button-highlight-font-weight: 600;
  --button-highlight-hover-color: #000;

  --button-padding-sm-y: .25rem;
  --button-padding-sm-x: .75rem;

  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  cursor: pointer;
  user-select: none;
  border-radius: var(--button-border-radius);
  text-decoration: none;
  line-height: var(--button-line-height);
  border-width: 0;
}

[data-theme="dark"] .button {
  --button-plain-bg: rgba(255,255,255,.1);
  --button-plain-color: #fff;
  --button-plain-hover-bg: rgba(255,255,255,.15);
}

/* -- Styles -- */
.button--primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
}

.button--primary:hover {
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-color);
}

.button--primary:active {
  background-color: var(--button-primary-active-bg);
}

.button--plain {
  background-color: var(--button-plain-bg);
  color: var(--button-plain-color) !important;
}

.button--plain:hover {
  background-color: var(--button-plain-hover-bg);
}

.button--plain-light {
  background-color: var(--button-plain-light-bg);
  color: var(--button-plain-light-color) !important;
}

.button--plain-light:hover {
  background-color: var(--button-plain-light-hover-bg);
}

.button--highlight {
  background-color: var(--button-highlight-bg);
  color: var(--button-highlight-color);
  font-weight: var(--button-highlight-font-weight) !important;
}

.button--highlight:hover {
  background-color: color-mix(in srgb, var(--button-highlight-bg) 90%, #000);
  color: var(--button-highlight-hover-color);
}

/* -- Sizes -- */
.button--sm {
  padding: var(--button-padding-sm-y) var(--button-padding-sm-x) !important;
}

/* -- Shapes -- */
.button--icon {
  line-height: 1;
}

.button-icon img {
  height: 1.3rem;
}