/* Stained Glass buttons */

.site-endcrawl.area-app #main .container form .endcrawl-btn {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;

  vertical-align: middle;

  border: none;
  margin-bottom: 0;
  padding: 0 calc(var(--slide-height) / 2);

  text-align: center;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;

  user-select: none;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn .icon {
  font-size: 17px;
  line-height: inherit;
  padding-top: calc(var(--slide-height) / 24);
}
/* per-icon vert spacing */
.site-endcrawl.area-app #main .container form .endcrawl-btn .icon:has(.fa-tachometer) {
  padding-top: calc(var(--slide-height) / 48);
  padding-right: calc(var(--slide-height) / 24);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn .label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding-left: calc(var(--slide-height) / 6);
  padding-right: 0;
  padding-top: 0.1em;
  padding-bottom: 0;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn .guillemet::after {
  content: '\e058';
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.hover-guillemet .guillemet {
  font-family: 'EndcrawlApp';
  font-size: inherit;
  line-height: inherit;
  margin-top: calc(var(--slide-height) / 24);
  margin-left: -1em;
  opacity: 0;
  transition: opacity 0.3s ease-in, margin 0.4s ease-in;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.hover-guillemet:hover .guillemet {
  margin-left: 1em;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn:not(.hover-guillemet) .guillemet {
  display: none;
}

/* button elements are on top of the ::before background */

.site-endcrawl.area-app #main .container form button.endcrawl-btn::before {
  z-index: -1;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn > * {
  z-index: 1;
}

/* button macro options */

.site-endcrawl.area-app #main .container form .endcrawl-btn,
.site-endcrawl.area-app #main .container form .endcrawl-btn.height-4 {
  height:      calc(var(--slide-height) * 4 / 3);
  line-height: calc(var(--slide-height) * 4 / 3);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.height-3 {
  height:      calc(var(--slide-height) * 3 / 3);
  line-height: calc(var(--slide-height) * 3 / 3);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.height-5 {
  height:      calc(var(--slide-height) * 5 / 3);
  line-height: calc(var(--slide-height) * 5 / 3);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.height-6 {
  height:      calc(var(--slide-height) * 6 / 3);
  line-height: calc(var(--slide-height) * 6 / 3);
}

.site-endcrawl.area-app #main .container form .endcrawl-btn,
.site-endcrawl.area-app #main .container form .endcrawl-btn.align-center {
  justify-content: center;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.align-left {
  justify-content: left;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.align-left .label {
  flex-grow: 1;
  text-align: left;
}

/* button colors */
/* CYAN */

.site-endcrawl.area-app #main .container form .endcrawl-btn::before,
.site-endcrawl.area-app #main .container form .endcrawl-btn.cyan::before {
  opacity: 1;
  background-color: hsla(185.2, 100%, 61.2%, 0.13);
  transition: background-color 0.3s;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn *,
.site-endcrawl.area-app #main .container form .endcrawl-btn.cyan * {
  color: hsla(184.9, 65.2%, 74.1%, 1);
  transition: color 0.3s, opacity 0.3s;
}
.site-endcrawl.area-app #main .container form .endcrawl-btn:hover::before,
.site-endcrawl.area-app #main .container form .endcrawl-btn.cyan:hover::before {
  opacity: 1;
  background-color: hsla(184.9, 100%, 50%, 0.38);
  transition: background-color 0.3s;
}
.site-endcrawl.area-app #main .container form button[type=submit].endcrawl-btn:hover *,
.site-endcrawl.area-app #main .container form button[type=submit].endcrawl-btn.cyan:hover * {
  opacity: 1;
  color: hsla(185.5, 100%, 93.5%, 1);
  transition: color 0.2s, opacity 0.166s linear, margin 0.25s ease-out;
}

/* MAGENTA */

.site-endcrawl.area-app #main .container form .endcrawl-btn.magenta::before {
  background-color: hsla(300, 100%, 64.5%, 0.14);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.magenta * {
  color: hsla(300, 37%, 78.8%, 1);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.magenta:hover::before {
  background-color: hsla(306.4, 100%, 53.9%, 0.36);
}
.site-endcrawl.area-app #main .container form button[type=submit].endcrawl-btn.magenta:hover * {
  color: hsla(300, 100%, 94.9%, 1);
}

/* GOLD */

.site-endcrawl.area-app #main .container form .endcrawl-btn.gold::before {
  background-color: hsla(49.4, 98.3%, 54.9%, 0.13);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.gold * {
  color: hsla(48.3, 29.1%, 69%, 1);
}
.site-endcrawl.area-app #main .container form .endcrawl-btn.gold:hover::before {
  background-color: hsla(45.1, 98.1%, 41.2%, 0.5);
}
.site-endcrawl.area-app #main .container form button[type=submit].endcrawl-btn.gold:hover * {
  color: hsla(47.3, 100%, 93.5%, 1);
}

/* Disabled or Invalid-Form Buttons */

.site-endcrawl.area-app #main .container form button.endcrawl-btn[type=submit]:disabled,
.site-endcrawl.area-app #main .container form:invalid button.endcrawl-btn[type=submit] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1;
  filter: none;
}
.site-endcrawl.area-app #main .container form button.endcrawl-btn[type=submit]:disabled *,
.site-endcrawl.area-app #main .container form:invalid button.endcrawl-btn[type=submit] * {
  color: rgba(var(--endcrawl-foreground-rgb), 0.4);
}
.site-endcrawl.area-app #main .container form button.endcrawl-btn[type=submit]:disabled::before,
.site-endcrawl.area-app #main .container form:invalid button.endcrawl-btn[type=submit]::before {
  background-color: var(--endcrawl-elevated--02);
}