/*
Novelty military style switchables (aka titan launch control style) for btn-deluxe by hnldesign - https://www.hnldesign.nl
needs btn-deluxe.css (via btn-deluxe.bs.css' @import)
needs btn-deluxe.bs.css
v 2.1.6
 */

/*
@import "btn-deluxe.bs.css";
*/

.btn-frame {
    display: inline-block;
    padding: 0 8px 6px 8px;
    background-color: #444;
    color: #EEE;
    border-radius: var(--native-bs-rounding, .25rem);
    box-shadow:
            2px 3px 5px rgb(0 0 0 / 10%),
            5px 8px 10px rgb(0 0 0 / 15%),
            inset 1px 1px 1px rgb(255 255 255 / 41%),
            inset -1px -1px 1px rgb(0 0 0 / 90%);
}
.btn-frame.light {
    background-color: #DDD;
    color: #333;
    box-shadow:
            2px 3px 5px rgb(0 0 0 / 10%),
            5px 8px 10px rgb(0 0 0 / 15%),
            inset 1px 1px 1px rgb(255 255 255 / 61%),
            inset -1px -1px 1px rgb(0 0 0 / 10%);
}
.btn-milspec, .btn-frame  {
    font-family: 'News Cycle', sans-serif;
    line-height: 1.2;
    letter-spacing: 1px;
}
.btn-deluxe.btn-milspec {
    box-shadow: 0 var(--btn-deluxe-shadowsize) 3px hsl(var(--but-deluxe-hue, 334deg) 0% 0% / 20%);
}
.btn-deluxe.btn-milspec:focus:not(:focus-visible) {
    box-shadow: 0 var(--btn-deluxe-shadowsize) 3px hsl(var(--but-deluxe-hue, 334deg) 0% 0% / 20%);
}

/* cosmetics */
.btn.btn-deluxe.btn-milspec,
.btn-deluxe.btn-milspec {
    --but-deluxe-sat: 0%;
}
.btn-deluxe.btn-milspec:active,
.btn.btn-deluxe.btn-milspec:active,
.btn-deluxe.btn-milspec.active,
.btn.btn-deluxe.btn-milspec.active {
    transition: filter 1000ms, box-shadow 400ms;
    filter: brightness(1.25) drop-shadow(0 0 10px hsl(var(--but-deluxe-hue, 216deg) 100% 75% / 50%));
    --but-deluxe-sat: 47%;
    --but-deluxe-bri: 70%;
}
.btn.btn-deluxe.btn-milspec,
.btn-deluxe.btn-milspec {
    --but-deluxe-txt: #999;
    --but-deluxe-bri: 67%;
    --but-deluxe-incandest-sat: 100%;
}
.btn.btn-dark.btn-deluxe.btn-milspec,
.btn.btn-light.btn-deluxe.btn-milspec {
    --but-deluxe-txt: #999;
    --but-deluxe-sat: 0%;
    --but-deluxe-incandest-sat: 0%;
}

/* front panel */
.btn-deluxe.btn-milspec > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec > .btn-deluxe-front {
    text-shadow: none;
    background: hsl(0deg 0% 100% / 82%);
    box-shadow: inset 0 0 11px hsl(0deg 0% 63% / 80%);
    font-size: 1.2rem;
    padding: .5rem 1rem;
}
.btn.btn-deluxe.btn-milspec:hover > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.active:active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec:active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec:focus > .btn-deluxe-front {
    background: hsl(0deg 0% 100% / 82%);
}
.btn.btn-dark.btn-deluxe.btn-milspec:hover > .btn-deluxe-front,
.btn.btn-dark.btn-deluxe.btn-milspec.active:active > .btn-deluxe-front,
.btn.btn-dark.btn-deluxe.btn-milspec:focus > .btn-deluxe-front,
.btn.btn-dark.btn-deluxe.btn-milspec > .btn-deluxe-front {
    background: hsl(0deg 0% 20% / 82%);
}

.btn-deluxe.btn-milspec:active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec:active > .btn-deluxe-front,
.btn-deluxe.btn-milspec.active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.active > .btn-deluxe-front {
    -webkit-text-stroke: 0.035rem hsl(var(--but-deluxe-hue, 216deg) 50% 30%);
    text-shadow: none;
    --but-deluxe-txt: #333 !important;
    background: radial-gradient(
            ellipse at center 65%,
            hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 80%) 40%,
            hsl(var(--but-deluxe-hue, 216deg) calc(var(--but-deluxe-sat, 100%) * 2) var(--but-deluxe-bri))
    );
    box-shadow: inset 0 0 10px hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) calc(var(--but-deluxe-bri) / 2));
}

/* letters glowing instead of button */
.btn-deluxe.btn-milspec.inverted:active,
.btn.btn-deluxe.btn-milspec.inverted:active,
.btn-deluxe.btn-milspec.inverted.active,
.btn.btn-deluxe.btn-milspec.inverted.active {
    filter: none;
    /*box-shadow: none;*/
}
.btn-deluxe.btn-deluxe-switchable.btn-milspec.inverted:active,
.btn.btn-deluxe.btn-deluxe-switchable.btn-milspec.inverted:active,
.btn-deluxe.btn-deluxe-switchable.btn-milspec.inverted.active,
.btn.btn-deluxe.btn-deluxe-switchable.btn-milspec.inverted.active {
    box-shadow: none;
}

.btn-deluxe.btn-milspec.inverted:active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.inverted:active > .btn-deluxe-front,
.btn-deluxe.btn-milspec.inverted.active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.inverted.active > .btn-deluxe-front,
.btn-deluxe.btn-milspec.inverted > .btn-deluxe-front {
    -webkit-text-stroke: 0.04rem hsl(var(--but-deluxe-hue, 216deg) 0% 50%);
    background: #2f2f2f !important;
    box-shadow: none;
}
.btn-deluxe.btn-milspec.inverted > .btn-deluxe-edge {
    background: linear-gradient(
            to left,
            hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 0%) 0%,
            hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 0%) 8%,
            hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 0%) 92%,
            hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 0%) 100%
    );
}
.btn-deluxe.btn-milspec.inverted:active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.inverted:active > .btn-deluxe-front,
.btn-deluxe.btn-milspec.inverted.active > .btn-deluxe-front,
.btn.btn-deluxe.btn-milspec.inverted.active > .btn-deluxe-front {
    color: hsl(var(--but-deluxe-hue, 216deg) 100% 75%);
    -webkit-text-stroke: 0.04rem hsl(var(--but-deluxe-hue, 216deg) 100% 70%);
    --stroke-color: hsl(var(--but-deluxe-hue, 216deg) 100% 50% / 25%);
    filter: brightness(1.5) contrast(1.25);
    text-shadow:
            -1px -1px 0 var(--stroke-color),
            0   -1px 0 var(--stroke-color),
            1px -1px 0 var(--stroke-color),
            1px  0   0 var(--stroke-color),
            1px  1px 0 var(--stroke-color),
            0    1px 0 var(--stroke-color),
            -1px  1px 0 var(--stroke-color),
            -1px  0   0 var(--stroke-color),

            0  0  1px hsl(var(--but-deluxe-hue, 216deg) 100% 50% / 20%),
            0  0  4px hsl(var(--but-deluxe-hue, 216deg) 100% 50% / 70%),
            0  0  7px hsl(var(--but-deluxe-hue, 216deg) 100% 30% / 70%);
    background: radial-gradient(
            closest-side,
            hsl(var(--but-deluxe-hue, 216deg) 25% 60% / 30%),
            #2f2f2f
    );
}


/* flashing */
.btn-deluxe.btn-milspec.flashing.active,
.btn-deluxe.btn-milspec.flashing.active:active,
.btn.btn-deluxe.btn-milspec.flashing.active {
    animation: 1000ms linear 0ms infinite running flashing;
}
.btn-deluxe.btn-milspec.flashing.inverted.active,
.btn-deluxe.btn-milspec.flashing.inverted.active:active,
.btn.btn-deluxe.btn-milspec.flashing.inverted.active {
    animation: 1000ms linear 0ms infinite running flashing-invert;
}
.btn.btn-deluxe.btn-milspec.flashing.inverted.active > .btn-deluxe-front {
    filter: none;
}
.btn-deluxe.btn-milspec.flashing.inverted.active.fast,
.btn-deluxe.btn-milspec.flashing.active.fast {
    animation-duration: 400ms;
}
.btn-deluxe.btn-milspec.flashing.inverted.active.faster,
.btn-deluxe.btn-milspec.flashing.active.faster {
    animation-duration: 200ms;
}
@keyframes flashing {
    0%, 60%, 100% {
        filter: brightness(1) saturate(0.5) drop-shadow(0 0 10px hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 80% / 0%));
    }
    15%, 50% {
        filter: brightness(1.35) saturate(1.25) drop-shadow(0 0 10px hsl(var(--but-deluxe-hue, 216deg) var(--but-deluxe-incandest-sat) 80% / 60%));
    }
}
@keyframes flashing-invert {
    0%, 60%, 100% {
        filter: brightness(1) saturate(.5) contrast(1);
    }
    15%, 50% {
        filter: brightness(1.5) saturate(1.5) contrast(1.25);
    }
}
/* end novelty military style */