/* Buttons */

.ds-btn {
  --mx: 50%;
  --my: 50%;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-position 260ms ease, filter 240ms ease, border-color 240ms ease;
  padding: .5em 1.5em;
}

body #page-container .et_pb_section .et_pb_button.ds-btn:hover {
    padding: .5em 1.5em!important;
    border: 1px solid transparent;
}

.ds-btn {
  background-image: linear-gradient(
    120deg,
    var(--accent-500) 0%,
    var(--accent-300) 50%,
    var(--accent-500) 100%
  );
  background-size: 220% 220%;
  background-position: 0% 40%;
}

.ds-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      hsla(352 calc(var(--btn-light-sat) * 1%) 78% / calc(0.12 * var(--btn-subtlety))) 0%,
      transparent 46%
    ),
    radial-gradient(
      circle at calc(100% - var(--mx)) calc(100% - var(--my)),
      hsla(352 calc(var(--btn-dark-sat) * 1%) 18% / calc(0.20 * var(--btn-subtlety))) 0%,
      transparent 50%
    );
}

.ds-btn:hover {
  background-position: 100% 60%;
  filter: brightness(1.03) saturate(1.03);
}

.ds-btn:active {
  filter: brightness(0.98);
}

.ds-btn:focus-visible {
  outline: 2px solid hsla(352 88% 72% / 0.72);
  outline-offset: 2px;
}