.btn-fill {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: transparent;
  transition: color 0.3s ease;
}

.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  z-index: -1;
  transition: width 0.3s ease;
}

.btn-fill:hover::before {
  width: 100%;
}

.btn-fill-primary::before {
  background: var(--color-primary);
}

.btn-fill-secondary::before {
  background: var(--color-secondary);
}

.btn-fill-tertiary::before {
  background: var(--color-tertiary);
}

.btn-fill-white::before {
    background: var(--color-white);
}

.btn-text-primary:hover {
  color: var(--color-primary) !important;
}

.btn-text-secondary:hover {
  color: var(--color-secondary) !important;
}

.btn-text-tertiary:hover {
  color: var(--color-tertiary) !important;
}

.btn-text-white:hover {
  color: var(--color-white) !important;
}