:root {
  --ezi-hover-fill: #eef4ff;
  --ezi-hover-fill-strong: #eaf2ff;
  --ezi-hover-border: #aac4f2;
  --ezi-hover-ink: #1746b5;
  --ezi-hover-shadow: 0 10px 18px rgba(23, 70, 181, 0.12);
  --ezi-hover-shadow-strong: 0 14px 28px rgba(23, 70, 181, 0.24);
}

.menu a,
.menu button,
.btn-inline,
.chip,
.btn-secondary,
.btn-warning,
.action-link {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}

.btn-primary {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}

.action-link {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 6px 10px;
  text-decoration: none;
}

.menu a:hover,
.menu button:hover,
.menu a:focus-visible,
.menu button:focus-visible,
.btn-inline:hover,
.btn-inline:focus-visible,
.chip:hover,
.chip:focus-visible,
.btn-secondary:not(.is-active):hover,
.btn-secondary:not(.is-active):focus-visible {
  background: var(--ezi-hover-fill);
  border-color: var(--ezi-hover-border);
  color: var(--ezi-hover-ink);
  box-shadow: var(--ezi-hover-shadow);
  transform: translateY(-1px);
  outline: none;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
  box-shadow: var(--ezi-hover-shadow-strong);
  filter: brightness(1.04);
  transform: translateY(-1px);
  outline: none;
}

.btn-warning:hover,
.btn-warning:focus-visible {
  background: #fff1d8;
  border-color: #e2a65a;
  color: #6f4203;
  box-shadow: 0 10px 18px rgba(122, 75, 6, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.action-link:hover,
.action-link:focus-visible {
  background: var(--ezi-hover-fill-strong);
  color: #123ea7;
  box-shadow: inset 0 0 0 1px #bfd3f6;
  transform: translateY(-1px);
  outline: none;
}