/* MU DSE Buttons 1.1.0 — mirrors site button styles (gradient, white, white-outline) */

/* Base */
button, .btn {
  font-family: var(--font-family-text);
  font-weight: 900;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-buttons);
}

/* Core button */
.btn{
  font-size: var(--font-size-buttons);
  position: relative;
  font-weight: 900;
  display: inline-block;
  line-height: 1;
  padding: var(--padding-buttons);
  border-radius: var(--border-radius-button);
  text-align: center;
  font-style: normal;
  cursor: pointer;
  overflow: hidden;
  border: 4px solid;
}

/* Large & Outline paddings */
.btn.big{ padding: var(--padding-buttons-big-no-border); }
.btn.big.outline{ padding: var(--padding-buttons-big); }

/* Small helper */
.btn.sm{ padding: 10px 14px; font-size: calc(var(--font-size-buttons) - 2px); }

/* White / Outline */
.btn.outline { background: none; }
.btn.white,
.btn.white.outline:hover,
.btn.white.outline:focus {
  color: var(--color-primary);
  background-color: #fff;
  border-color: #fff;
}
.btn.white:hover,
.btn.white:focus,
.btn.white.outline {
  color: #fff;
  background-color: transparent;
}

/* Gradient primary */
.btn.gradient {
  background: var(--color-gradient);
  border: none;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: var(--padding-buttons-no-border);
  background-size: 200% 200%;
}
.btn.gradient:hover,
.btn.gradient:focus { background-size: 100% 100%; }

/* White-background overrides (from theme) */
.white-background .standaard-content .btn.white,
.white-background .standaard-content .btn.white.outline:hover,
.white-background .standaard-content .btn.white.outline:focus {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.white-background .standaard-content .btn.white:hover,
.white-background .standaard-content .btn.white:focus,
.white-background .standaard-content .btn.white.outline {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

/* Text link (non-button) */
.dse-textlink {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  line-height: 1;
}
/* Hoverkleur voor tekstlinks (DSE buttons) */
.dse-textlink:hover,
.dse-textlink:focus {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* Icon spacing */
.btn i[class^="icon-"], .btn i[class*=" icon-"],
.dse-textlink i[class^="icon-"], .dse-textlink i[class*=" icon-"] {
  line-height: 1;
  vertical-align: middle;
  font-style: normal;
  margin-left: .35em;
}