/*
btn-deluxe by hnldesign - https://www.hnldesign.nl
button CSS based on work by Josh Comeau - https://www.joshwcomeau.com/animation/3d-button/
v 3.2.1
new: gradient style
 */
/* if btn deluxe is included in a Bootstrap project, but not the required css (btn-deluxe.bs.css),
make sure btn-deluxe's spans don't mess up existing Bootstrap buttons
 */
.btn > span.btn-deluxe-front, .btn > span.btn-deluxe-edge {
  display: contents;
}

/* foundation*/
.btn-deluxe, .btn-deluxe-switchable {
  --but-deluxe-txt: #FFF;
  --but-deluxe-hue: 334deg;
  --but-deluxe-sat: 100%;
  --but-deluxe-bri: 47%;
  --but-deluxe-alt-hue: 369deg;
  --but-deluxe-alt-sat: 80%;
  --but-deluxe-alt-bri: 61.1%;
  --but-deluxe-shade-angle: 15deg;
  --btn-deluxe-trans-duration: 250ms;
  --btn-deluxe-round: 10px;
  --btn-deluxe-up: 5px;
  --btn-deluxe-shadowsize: 3px;
  position: relative;
  padding: 3px 0 var(--btn-deluxe-up) 0;
  border-radius: var(--btn-deluxe-round);
  outline-offset: 4px;
  cursor: pointer;
  border: none;
  background: transparent !important;
  overflow: hidden;
  transform: translateZ(0);
  /* fixes radius overflow bug @ ios safari: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
  transition-property: filter, box-shadow;
  transition-duration: var(--btn-deluxe-trans-duration), var(--btn-deluxe-trans-duration);
  transition-timing-function: ease, ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none;
  /* disable the IOS popup when long-press on a link */
  /* use negative spread to prevent shadow showing from under the button's top-side */
  box-shadow: 0 var(--btn-deluxe-shadowsize) 4px -1px hsl(var(--but-deluxe-hue, 334deg) var(--but-deluxe-sat, 100%) calc(var(--but-deluxe-bri, 47%) * 0.4)/22%);
  /* inner spans */
  /* states */
  /* hover-enabled-devices */
}
.btn-deluxe > .btn-deluxe-edge, .btn-deluxe-switchable > .btn-deluxe-edge {
  box-sizing: border-box;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--btn-deluxe-round);
  background: linear-gradient(to left, hsl(var(--but-deluxe-hue, 216deg), var(--but-deluxe-sat, 100%), calc(var(--but-deluxe-bri, 47%) / 2)) 0%, hsl(var(--but-deluxe-hue, 216deg), var(--but-deluxe-sat, 100%), calc(var(--but-deluxe-bri, 47%) / 1.5)) 8%, hsl(var(--but-deluxe-hue, 216deg), var(--but-deluxe-sat, 100%), calc(var(--but-deluxe-bri, 47%) / 1.5)) 92%, hsl(var(--but-deluxe-hue, 216deg), var(--but-deluxe-sat, 100%), calc(var(--but-deluxe-bri, 47%) / 2)) 100%);
  margin-top: calc(var(--btn-deluxe-up) + 2px);
}
.btn-deluxe > .btn-deluxe-front, .btn-deluxe-switchable > .btn-deluxe-front {
  display: block;
  position: relative;
  box-sizing: border-box;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 10px 30px;
  border-radius: var(--btn-deluxe-round);
  color: var(--but-deluxe-txt);
  background: hsl(var(--but-deluxe-hue), var(--but-deluxe-sat), var(--but-deluxe-bri));
  background-image: linear-gradient(var(--but-deluxe-shade-angle), hsl(var(--but-deluxe-hue), var(--but-deluxe-sat), var(--but-deluxe-bri)) 0%, hsl(var(--but-deluxe-alt-hue), var(--but-deluxe-alt-sat), var(--but-deluxe-alt-bri)) 100%);
  will-change: transform;
  transition-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
  transition: transform var(--btn-deluxe-trans-duration) cubic-bezier(0.3, 0.7, 0.4, 1);
}
@media all and (hover: hover) {
  .btn-deluxe:hover, .btn-deluxe-switchable:hover {
    background: transparent;
    filter: brightness(105%);
    --btn-deluxe-trans-duration: 250ms;
    --btn-deluxe-shadowsize: 5px;
  }
  .btn-deluxe > .btn-deluxe-front, .btn-deluxe-switchable > .btn-deluxe-front {
    transition: transform var(--btn-deluxe-trans-duration);
  }
  .btn-deluxe:hover > .btn-deluxe-front, .btn-deluxe-switchable:hover > .btn-deluxe-front {
    transform: translateY(-3px);
  }
}
@media not all and (hover: hover) {
  .btn-deluxe, .btn-deluxe-switchable {
    /* on non-hover (mobile/touch) devices, there is no 'lift' when hovering the button, so the depression
    when pressing the button is relatively shorter. To achieve the same 'feel' and satisfaction of pressing it,
    we'll set the height of a button on a non-hover device slightly higher (unless $btn-deluxe-hover is lowered) */
    --btn-deluxe-up: calc(min(3px, 2px) + 5px);
  }
}
.btn-deluxe:focus:not(:focus-visible), .btn-deluxe-switchable:focus:not(:focus-visible) {
  box-shadow: 0 var(--btn-deluxe-shadowsize) 4px -1px hsl(var(--but-deluxe-hue, 334deg) var(--but-deluxe-sat, 100%) calc(var(--but-deluxe-bri, 47%) * 0.4)/22%);
}
.btn-deluxe:active, .btn-deluxe-switchable:active {
  --btn-deluxe-shadowblur: 1px;
  --btn-deluxe-shadowsize: 2px;
}
.btn-deluxe:active > .btn-deluxe-front, .btn-deluxe-switchable:active > .btn-deluxe-front {
  transform: translateY(calc(var(--btn-deluxe-up) - 2px));
  --btn-deluxe-trans-duration: 20ms;
}
.btn-deluxe:focus:not(:focus-visible), .btn-deluxe-switchable:focus:not(:focus-visible) {
  background: transparent;
  outline: none;
  border: 0 none;
}
.btn-deluxe.disabled > .btn-deluxe-front, .disabled.btn-deluxe-switchable > .btn-deluxe-front, .btn-deluxe:disabled > .btn-deluxe-front, .btn-deluxe-switchable:disabled > .btn-deluxe-front, .btn-deluxe[disabled] > .btn-deluxe-front, [disabled].btn-deluxe-switchable > .btn-deluxe-front {
  /* disabled */
  transform: translateY(3px);
}

/* switchable - stays depressed */
.btn-deluxe-switchable.active,
.btn-deluxe-switchable.active:focus,
.btn-deluxe-switchable.active:active,
.btn-deluxe-switchable:active {
  box-shadow: none;
}

.btn-deluxe-switchable.active > .btn-deluxe-front {
  transform: translateY(calc(var(--btn-deluxe-up) + 2px));
}

.btn-deluxe-switchable:active > .btn-deluxe-front {
  --btn-deluxe-trans-duration: 60ms;
  transform: translateY(calc(var(--btn-deluxe-up) + 2px + max(3px, 3px)));
}

.btn-deluxe-switchable.active:focus > .btn-deluxe-front,
.btn-deluxe-switchable:active > .btn-deluxe-front,
.btn-deluxe-switchable.active > .btn-deluxe-front {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-deluxe-switchable.active:focus > .btn-deluxe-edge,
.btn-deluxe-switchable:active > .btn-deluxe-edge,
.btn-deluxe-switchable.active > .btn-deluxe-edge {
  --but-deluxe-bri: 40%;
}
/*# sourceMappingURL=btn-deluxe-v3.css.map */