.button,
a.button {
  background-color: transparent;
  display: inline-block;
  height: 30px;
  margin: 5px 6px 5px 0;
  padding: 0 10px;
  text-decoration: none;
  color: var(--color-black);
  font-family: 'Roboto', Arial, sans-serif !important;
  font-size: 14px !important;
  border: 0px;
  cursor: pointer;

  vertical-align: middle;
  /* outline: none; */
  border-radius: var(--border-radius);

  transition: background 0.1s;
}

.button[disabled],
.button[disabled]:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button.button-shadow {
  -moz-box-shadow: 2px 2px 3px -1px var(--color-black-30);
  -webkit-box-shadow: 2px 2px 3px -1px var(--color-black-30);
  box-shadow: 2px 2px 3px -1px var(--color-black-30);
}

.button.button-default,
a.button.button-default {
  background-color: var(--color-grey-50);
}

.button.button-default:hover,
a.button.button-default:hover {
  background-color: var(--color-grey-200);
}

.button.button-primary,
a.button.button-primary {
  color: var(--color-white) !important;
  background-color: var(--primary-color);
}

.button:has(> svg) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.button svg {
  flex-shrink: 0;
}

.button.button-primary svg path {
  fill: var(--color-white);
}

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

.button.button-secondary,
a.button.button-secondary {
  color: var(--color-white) !important;
  background-color: var(--color-grey-700);
}

.button.button-secondary:hover,
a.button.button-secondary:hover {
  background-color: var(--color-grey-700);
}

.button.button-primary-transparent,
a.button.button-primary-transparent {
  background: none !important;
  color: var(--primary-color);
}

.button.button-primary-transparent svg path {
  fill: var(--primary-color);
}

.button.button-primary-transparent:hover,
a.button.button-primary-transparent:hover {
  color: var(--primary-color-hover);
  /* height: 14px; */
}

.button.button-primary-transparent:hover svg path,
a.button.button-primary-transparent:hover svg path {
  fill: var(--primary-color-hover);
}

.button.button-primary-transparent:hover svg path {
  fill: var(--primary-color-hover);
}

.button.button-outline {
  background-color: transparent;
  border: 1px solid var(--color-grey-700);
}

.button.button-outline:hover,
.button.button-outline:active {
  background: transparent;
  opacity: 0.6;
}

.button.button-select:after,
a.button.button-select:after {
  content: '';
  display: block;
  background: url(../img/icon_triangle_down.svg) right center no-repeat;
  width: 15px;
  height: 18px;
  float: right;
  filter: invert(1);
}

.button.button-tall {
  height: 40px;
  margin: 0;
}

.button p,
a.button p,
#messageBody a.button p,
#aboutBox a.button p,
#pathQuestionWrapper a.button p,
#feedbackWrapper a.button p,
#pathQuestionWrapper #pathTestPerformWrapper a.button p {
  color: var(--color-white);
  text-transform: none;
  display: block;
  line-height: 20px;
  padding: 1px 0 1px 18px;
  margin: 8px;
  cursor: pointer;
  height: 22px;
  font-size: 12px;
  font-weight: 300;
}

.button:hover,
a.button:hover {
  background: var(--color-grey-400);
}

.button:hover p,
a.button:hover p,
#messageBody a.button:hover p,
#aboutBox a.button:hover p,
#pathQuestionWrapper a.button:hover p,
#feedbackWrapper a.button:hover p,
#pathQuestionWrapper #pathTestPerformWrapper a.button:hover p {
}

.button:active,
a.button:active {
  background: var(--color-grey-200);
}

.button:active p,
a.button:active p,
#messageBody a.button:active p,
#aboutBox a.button:active p,
#pathQuestionWrapper a.button:active p,
#pathQuestionWrapper #pathTestPerformWrapper a.button:active p {
}

a.button.narrow {
  height: 17px;
}

a.button.narrow p {
  height: 17px;
  padding: 0 0 0 18px;
  font-size: 11px;
  line-height: 15px;
  margin-right: -2px;
}

.button.button-soft {
  background-color: var(--color-grey-50);
  color: var(--color-grey-700);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.button.button-soft:hover {
  opacity: 0.85;
}

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

a.button.narrow:hover {
}

a.button.narrow:hover p {
}

a.button.narrow:active {
}

a.button.narrow:active p {
}

a.button.disabled,
a.button.disabled:hover,
a.button.disabled:active {
  cursor: default;
}

a.button.disabled p,
a.button.disabled:hover p,
a.button.disabled:active p,
#pathQuestionWrapper a.button.disabled p,
#pathQuestionWrapper a.button.disabled p:hover,
#pathQuestionWrapper a.button.disabled p:active {
  cursor: default;
}

a.button.disabled.narrow,
a.button.disabled.narrow:hover,
a.button.disabled.narrow:active {
}

a.button.disabled.narrow p,
a.button.disabled.narrow p:hover,
a.button.disabled.narrow p:active {
}

.button.button-search {
  background-image: url(../img/icon_search.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 30px;
  padding: 0;
  margin: 5px;
}

.button.button-settings {
  background-image: url(../img/icon_settings.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 40px;
}