/* File: assets/css/components/buttons.css */
/* Buttons (system). */

:where(.btn,.dag-btn,button.btn,a.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:rgba(255,255,255,.06);
  color:var(--dag-text);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
  transition:
    transform var(--dag-transition),
    box-shadow var(--dag-transition),
    background var(--dag-transition),
    border-color var(--dag-transition),
    color var(--dag-transition),
    opacity var(--dag-transition);
}

:where(.btn,.dag-btn):hover{box-shadow:var(--dag-shadow-sm)}
:where(.btn,.dag-btn):active{transform:translateY(1px)}
:where(.btn,.dag-btn):focus-visible{box-shadow:var(--dag-ring), var(--dag-shadow-sm)}

/* Variants */
.btn--primary,
.btn-primary,
.dag-btn--primary{
  border-color:transparent;
  background:var(--dag-primary);
  color:var(--dag-primary-contrast);
}
.btn--primary:hover,
.btn-primary:hover,
.dag-btn--primary:hover{background:var(--dag-primary-hover)}

.btn--accent,
.dag-btn--accent{
  border-color:transparent;
  background:var(--dag-accent);
  color:var(--dag-accent-contrast);
}
.btn--accent:hover,
.dag-btn--accent:hover{background:var(--dag-accent-hover)}

.btn--secondary,
.dag-btn--secondary{
  background:transparent;
  border-color:var(--dag-border);
  color:var(--dag-text);
  box-shadow:none;
}
.btn--secondary:hover,
.dag-btn--secondary:hover{background:rgba(255,255,255,.06)}

.btn--ghost,
.dag-btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--dag-text);
  box-shadow:none;
}
.btn--ghost:hover,
.dag-btn--ghost:hover{background:rgba(255,255,255,.06)}

/* Size helpers */
.btn--sm,
.dag-btn--sm{min-height:40px;padding:10px 14px;font-weight:800}
.btn--block,
.dag-btn--block{width:100%}

/* Disabled */
:where(.btn,.dag-btn)[disabled],
:where(.btn,.dag-btn).disabled,
:where(.btn,.dag-btn)[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Inputs styled as buttons */
:where(input[type='submit'],input[type='button'],input[type='reset']){
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:var(--dag-primary);
  color:var(--dag-primary-contrast);
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform var(--dag-transition), box-shadow var(--dag-transition), background var(--dag-transition);
  position:relative;
  overflow:hidden;
}

:where(input[type='submit'],input[type='button'],input[type='reset']):hover{background:var(--dag-primary-hover);box-shadow:var(--dag-shadow-sm)}
:where(input[type='submit'],input[type='button'],input[type='reset']):active{transform:translateY(1px)}
:where(input[type='submit'],input[type='button'],input[type='reset']):focus-visible{box-shadow:var(--dag-ring), var(--dag-shadow-sm)}
:where(input[type='submit'],input[type='button'],input[type='reset']):disabled{
  opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;
}

/* Gutenberg button */
:where(.wp-block-button__link){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--dag-primary);
  color:var(--dag-primary-contrast);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform var(--dag-transition), box-shadow var(--dag-transition), background var(--dag-transition);
}
:where(.wp-block-button__link:hover){background:var(--dag-primary-hover);box-shadow:var(--dag-shadow-sm)}
:where(.wp-block-button__link):active{transform:translateY(1px)}
:where(.wp-block-button__link):focus-visible{box-shadow:var(--dag-ring), var(--dag-shadow-sm)}

/* Added: sheen on hover */
:where(.btn,.dag-btn,button.btn,a.btn,input[type='submit'],input[type='button'],input[type='reset'],.wp-block-button__link)::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 46%, transparent 62%);
  transform:translateX(-140%);
  transition:transform 600ms ease;
  pointer-events:none;
}
:where(.btn,.dag-btn,button.btn,a.btn,input[type='submit'],input[type='button'],input[type='reset'],.wp-block-button__link):hover::before{
  transform:translateX(140%);
}

@media (prefers-reduced-motion: reduce){
  :where(.btn,.dag-btn,.wp-block-button__link,input[type='submit'],input[type='button'],input[type='reset']){
    transition:none !important;
  }
  :where(.btn,.dag-btn,.wp-block-button__link,input[type='submit'],input[type='button'],input[type='reset']):active{
    transform:none !important;
  }
  :where(.btn,.dag-btn,button.btn,a.btn,input[type='submit'],input[type='button'],input[type='reset'],.wp-block-button__link)::before{
    transition:none!important;
  }
}