button,
[role*='button'],
input[type='button'],
input[type='submit'],
input[type='reset'],
.btn {
  //display: inline-block;
  //text-align:center;
  display: inline-flex;
  position: relative;
  width: fit-content;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--half-spacing);
  padding: 0.5rem 1.2rem;

  background-clip: padding-box !important;
  font-size: 1em;
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;

  &[disabled],
  &[aria-disabled],
  &:disabled {
    box-shadow: none;
    opacity: 0.15;
    pointer-events: none;
  }

  //&:not(:only-child):not(:last-child):not(:only-of-type) {
  //  margin-right: 1rem;
  //}

  svg {
    width: 0.8em;
    height: 0.8em;
  }

  /*  &:last-child {
      margin-bottom: 0;
    }*/
}

button,
[role*='button'],
input[type='button'],
input[type='submit'],
input[type='reset'],
.btn,
.btn--primary {
  --background-color: var(--primary-color);
  --color: var(--on-primary-color);
  --border-color: var(--primary-color-variation-2);
  --border-width: var(--control-border-width);
  --border-radius: var(--control-border-radius);
  --box-shadow: var(--primary-shadow);

  --hover-background-color: var(--primary-color-variation-1);
  --hover-color: var(--on-primary-color-variation-1);
  --hover-border-color: var(--primary-color-variation-3);
  --hover-box-shadow: var(--primary-shadow-variation-1);

  --active-background-color: var(--primary-color-variation-2);
  --active-color: var(--on-primary-color-variation-2);
  --active-border-color: var(--primary-color-variation-1);
  --active-box-shadow: var(--primary-shadow-variation-2);

  --focus-outline-width: calc(var(--border-width) * 3);
  --focus-outline-color: var(--on-primary-color-variation-1);

  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);

  &:active,
  &:focus {
    background-color: var(--active-background-color);
    color: var(--active-color);
    outline: dotted var(--focus-outline-color) var(--focus-outline-width);
    outline-offset: -0.35em;
    box-shadow: var(--active-box-shadow, initial);
  }

  &:hover {
    background-color: var(--hover-background-color);
    color: var(--hover-color);
    border: var(--border-width) solid var(--hover-border-color);
    box-shadow: var(--hover-box-shadow, initial);
  }
}

input[type='reset'],
button[type='reset'],
.btn--secondary {
  --background-color: var(--secondary-color);
  --color: var(--on-secondary-color);
  --border-color: var(--secondary-color-variation-2);

  --hover-background-color: var(--secondary-color-variation-1);
  --hover-color: var(--on-secondary-color-variation-1);
  --hover-border-color: var(--secondary-color-variation-3);

  --active-background-color: var(--secondary-color-variation-2);
  --active-color: var(--on-secondary-color-variation-2);
  --active-border-color: var(--secondary-color-variation-1);

  --focus-outline-color: var(--on-secondary-color-variation-1);
}

.btn--outline {
  --border-color: var(--background-color) !important;
  --color: var(--background-color) !important;
  --hover-color: var(--hover-background-color) !important;
  --hover-border-color: var(--hover-background-color) !important;
  background: transparent !important;
}

.btn--pills {
  --border-radius: 2em;
}

.btn--noshadow {
  box-shadow: none !important;

  //&:hover {
  //  box-shadow: none !important;
  //}
}

.btn--noborder {
  border-style: none !important;

  //&:hover {
  //  border-style: none !important;
  //}
}

.btn--norounded {
  --border-radius: 0;
}

.btn--circle {
  --border-radius: 50%;
}

.btn--block {
  width: 100% !important; //98% because of the shadow
  margin-bottom: var(--half-spacing);
  margin-right: 0 !important;
}

.btn--big {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  font-size: 1.6em !important;
}

.btn--small {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.8em !important;
}

.btn--info {
  --background-color: var(--info-color);
  --color: var(--on-info-color);
  --border-color: var(--info-color-variation-2);

  --hover-background-color: var(--info-color-variation-1);
  --hover-color: var(--on-info-color-variation-1);
  --hover-border-color: var(--info-color);

  --active-background-color: var(--info-color-variation-2);
  --active-color: var(--on-info-color-variation-2);
  --active-border-color: var(--info-color-variation-1);

  --focus-outline-color: var(--info-color-variation-1);
}

.btn--success {
  --background-color: var(--success-color);
  --color: var(--on-success-color);
  --border-color: var(--success-color-variation-2);

  --hover-background-color: var(--success-color-variation-1);
  --hover-color: var(--on-success-color-variation-1);
  --hover-border-color: var(--success-color);

  --active-background-color: var(--success-color-variation-2);
  --active-color: var(--on-success-color-variation-2);
  --active-border-color: var(--success-color-variation-1);

  --focus-outline-color: var(--success-color-variation-1);
}

.btn--warning {
  --background-color: var(--warning-color);
  --color: var(--on-warning-color);
  --border-color: var(--warning-color-variation-2);

  --hover-background-color: var(--warning-color-variation-1);
  --hover-color: var(--on-warning-color-variation-1);
  --hover-border-color: var(--warning-color);

  --active-background-color: var(--warning-color-variation-2);
  --active-color: var(--on-warning-color-variation-2);
  --active-border-color: var(--warning-color-variation-1);

  --focus-outline-color: var(--warning-color-variation-1);
}

.btn--danger {
  --background-color: var(--danger-color);
  --color: var(--on-danger-color);
  --border-color: var(--danger-color-variation-2);

  --hover-background-color: var(--danger-color-variation-1);
  --hover-color: var(--on-danger-color-variation-1);
  --hover-border-color: var(--danger-color);

  --active-background-color: var(--danger-color-variation-2);
  --active-color: var(--on-danger-color-variation-2);
  --active-border-color: var(--danger-color-variation-1);

  --focus-outline-color: var(--danger-color-variation-1);
}