/* [project]/components/ui/button-skins/foil.css [app-client] (css) */
.ui-btn {
  --h: 44px;
  --r: 8px;
  --d: 5px;
  --edge: #0b0b0f;
  --fill: linear-gradient(180deg, #2c2c37, #1f1f28);
  min-height: calc(var(--h) + var(--d));
  min-width: 44px;
  padding-bottom: var(--d);
  color: var(--color-bone);
  font: 700 var(--fs-t2) / 1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-btn[data-size="lg"] {
  --h: 56px;
  --r: 10px;
  --d: 6px;
}

.ui-btn__face {
  white-space: nowrap;
  border-radius: var(--r);
  background: var(--fill);
  box-shadow: inset 0 1px 0 #fff6,
    inset 0 -1px 0 #00000059,
    0 var(--d) 0 var(--edge),
    0 var(--d) 0 1px #000,
    0 0 0 1px #000,
    0 calc(var(--d) + 10px) 18px -4px #000000b3;
  text-shadow: 0 -1px #0006, 0 1px #ffffff24;
  transition: transform var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
  gap: 10px;
  padding: 0 20px;
}

.ui-btn:not([data-main="true"]):not([data-variant="tertiary"]) .ui-btn__face:before {
  content: "";
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast, .16s) ease;
  background: #ffffff14;
  position: absolute;
  inset: 0;
}

.ui-btn[data-size="lg"] .ui-btn__face {
  gap: 12px;
  padding: 0 32px;
}

.ui-btn__face > svg, .ui-btn__label {
  z-index: 2;
  position: relative;
}

.ui-btn__label {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.ui-btn__face > svg {
  width: 20px;
  height: 20px;
}

.ui-btn[data-size="lg"] .ui-btn__face > svg {
  width: 24px;
  height: 24px;
}

.ui-btn[data-main="true"][data-size="lg"] .ui-btn__label {
  font: 400 var(--fs-d3) / 1 var(--font-display);
  letter-spacing: .05em;
}

.ui-btn__sub {
  font: 500 13px / 1 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
}

.ui-btn[data-variant="primary"] {
  color: #fff;
  --edge: #6a0817;
  --fill: linear-gradient(172deg, #e3203b, #c8122c 46%, #a80f25 70%, #bc112a);
}

.ui-btn[data-variant="icon"] {
  width: var(--h);
}

.ui-btn[data-variant="icon"] .ui-btn__face, .ui-btn[data-variant="icon"][data-size="lg"] .ui-btn__face {
  padding: 0;
}

.ui-btn[data-variant="tertiary"] {
  min-height: var(--h);
  padding-bottom: 0;
}

.ui-btn[data-variant="tertiary"] .ui-btn__face {
  box-shadow: none;
  text-shadow: none;
  background: none;
  border-radius: 2px;
  padding: 0 6px;
}

.ui-btn[data-variant="tertiary"] .ui-btn__label {
  border-bottom: 2px dashed var(--color-bone-dim);
  padding-bottom: 4px;
}

.ui-btn[data-main="true"] .ui-btn__face {
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

.ui-btn[data-main="true"][data-size="lg"] .ui-btn__face {
  padding-left: 40px;
  padding-right: 40px;
}

.ui-btn[data-main="true"] .ui-btn__face:before {
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(#ffffff47 0 1.5px, #00000040 1.5px 4px) 0 / 10px 100% no-repeat, repeating-linear-gradient(#ffffff47 0 1.5px, #00000040 1.5px 4px) 100% / 10px 100% no-repeat;
  position: absolute;
  inset: 0;
}

.ui-btn[data-main="true"] .ui-btn__face:after {
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  background: linear-gradient(110deg, #0000 36%, #ff3d9a80 42%, #2ef2ff73 47%, #c8ff3d59 51%, #9b5cff73 55%, #0000 62%);
  width: 300%;
  transition: opacity .2s;
  animation: 6s ease-in-out infinite ui-foil-drift;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
}

.ui-btn[data-main="true"]:after {
  content: "";
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(closest-side, #d4142f8c, #d4142f26 60%, #0000);
  transition: opacity .2s;
  position: absolute;
  inset: -20px -28px -14px;
}

@keyframes ui-foil-drift {
  0%, 100% {
    transform: translateX(-14%);
  }

  50% {
    transform: translateX(14%);
  }
}

.ui-btn__ring {
  inset: -5px -5px calc(var(--d) - 5px);
  border: 2px solid var(--color-steel);
  border-radius: calc(var(--r) + 5px);
}

.ui-btn[data-variant="tertiary"] .ui-btn__ring {
  inset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .ui-btn:not(:disabled):not([aria-disabled="true"]):hover .ui-btn__face {
    transform: translateY(-1px);
  }

  .ui-btn:not([data-main="true"]):not([data-variant="tertiary"]):not(:disabled):not([aria-disabled="true"]):hover .ui-btn__face:before {
    opacity: 1;
  }

  .ui-btn[data-main="true"]:not(:disabled):not([aria-disabled="true"]):hover .ui-btn__face:after {
    opacity: .85;
  }

  .ui-btn[data-variant="tertiary"]:not(:disabled):not([aria-disabled="true"]):hover .ui-btn__face {
    color: var(--color-steel);
    transform: none;
  }

  .ui-btn[data-variant="tertiary"]:not(:disabled):not([aria-disabled="true"]):hover .ui-btn__label {
    border-color: var(--color-steel);
  }
}

.ui-btn:not(:disabled):not([aria-disabled="true"]):active .ui-btn__face {
  transform: translateY(var(--d));
  transition-duration: var(--dur-instant, 80ms);
  box-shadow: inset 0 2px 3px #00000059, 0 0 0 1px #000, 0 1px 0 1px #000, 0 3px 6px -2px #0009;
}

.ui-btn[data-variant="tertiary"]:not(:disabled):not([aria-disabled="true"]):active .ui-btn__face {
  box-shadow: none;
  transform: translateY(1px);
}

.ui-btn[data-hold="true"] .ui-btn__face {
  overflow: hidden;
}

.ui-hold__fill {
  background: #ffffff47;
}

.ui-btn:disabled, .ui-btn[aria-disabled="true"] {
  color: #958f84;
}

.ui-btn:disabled .ui-btn__face, .ui-btn[aria-disabled="true"] .ui-btn__face {
  transform: translateY(var(--d));
  text-shadow: none;
  background: #1a1a20;
  box-shadow: inset 0 2px 4px #0009, 0 0 0 1px #2c2c36;
}

.ui-btn[data-variant="tertiary"]:disabled .ui-btn__face, .ui-btn[data-variant="tertiary"][aria-disabled="true"] .ui-btn__face {
  box-shadow: none;
  background: none;
  transform: none;
}

.ui-btn:disabled .ui-btn__face:before, .ui-btn:disabled .ui-btn__face:after, .ui-btn:disabled:after, .ui-btn[aria-disabled="true"] .ui-btn__face:before, .ui-btn[aria-disabled="true"] .ui-btn__face:after, .ui-btn[aria-disabled="true"]:after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn[data-main="true"] .ui-btn__face:after {
    animation: none;
    transform: translateX(-14%);
  }
}

html.lite .ui-btn[data-main="true"] .ui-btn__face:after {
  animation: none;
  transform: translateX(-14%);
}