/* ============================================================
   IDUN DESIGN SYSTEM — BUTTON LARGE COMPONENT
   components/button-large.css
   ============================================================ */

/* ----------------------------------------------------------
   Component tokens
   ---------------------------------------------------------- */
:root {
  --idunds-btn-large-height:          48px;
  --idunds-btn-large-border-radius:   0;
  --idunds-btn-large-padding-x:       var(--idunds-root-space-m);
  --idunds-btn-large-icon-padding-x:  var(--idunds-root-space-s);
  --idunds-btn-large-gap:             var(--idunds-root-space-s);
  --idunds-btn-large-font-family:     var(--idunds-root-font-family-ui);
  --idunds-btn-large-font-size:       var(--idunds-root-font-size-base);
  --idunds-btn-large-font-weight:     var(--idunds-root-font-weight-medium);
  --idunds-btn-large-letter-spacing:  0.05em;
}


/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
.btn-large {
  display:          inline-flex;
  flex-direction:   row;
  align-items:      center;
  gap:              var(--idunds-btn-large-gap);
  height:           var(--idunds-btn-large-height);
  padding-left:     var(--idunds-btn-large-padding-x);
  padding-right:    var(--idunds-btn-large-padding-x);
  border-radius:    var(--idunds-btn-large-border-radius);
  font-family:      var(--idunds-btn-large-font-family);
  font-size:        var(--idunds-btn-large-font-size);
  font-weight:      var(--idunds-btn-large-font-weight);
  letter-spacing:   var(--idunds-btn-large-letter-spacing);
  text-transform:   uppercase;
  text-decoration:  none;
  cursor:           pointer;
  box-sizing:       border-box;
  white-space:      nowrap;
  transition:       background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Icon variant — tighter padding */
.btn-large--has-icon {
  padding-left:  var(--idunds-btn-large-icon-padding-x);
  padding-right: var(--idunds-btn-large-icon-padding-x);
}

/* Icon inherits text color */
.btn-large svg {
  display:      block;
  flex-shrink:  0;
  fill:         none;
  stroke:       currentColor;
}

/* Small size override */
.btn-large--small {
  height:       40px;
  padding-left:  var(--idunds-root-space-s);
  padding-right: var(--idunds-root-space-s);
  gap:           var(--idunds-root-space-xs);
}

.btn-large--small.btn-large--has-icon {
  padding-left:  var(--idunds-root-space-xs);
  padding-right: var(--idunds-root-space-xs);
}


/* ----------------------------------------------------------
   PRIMARY — Default
   ---------------------------------------------------------- */
.btn-large--primary {
  background-color: var(--idunds-color-button-bg-primary);
  color:            var(--idunds-color-button-text-primary);
  border-top:       var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-left:      var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-right:     var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-bottom:    var(--idunds-border-width-button-accent)  solid var(--idunds-color-button-accent);
  box-shadow:       var(--idunds-shadow-button-default);
}

/* PRIMARY — Hover */
.btn-large--primary:hover,
.btn-large--primary.is-hover {
  background-color: var(--idunds-color-button-bg-interact);
  box-shadow:       var(--idunds-shadow-button-raised);
  border-top:       var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-left:      var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-right:     var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-bottom:    var(--idunds-border-width-button-accent)  solid var(--idunds-color-button-accent);
}

/* PRIMARY — Active */
.btn-large--primary:active,
.btn-large--primary.is-active {
  background-color: var(--idunds-color-button-bg-interact);
  border-top:       var(--idunds-border-width-button-accent)  solid var(--idunds-color-button-accent-active);
  border-right:     var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent-active);
  border-bottom:    var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent-active);
  border-left:      var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent-active);
  box-shadow:       var(--idunds-shadow-button-pressed);
}

/* PRIMARY — Disabled */
.btn-large--primary:disabled,
.btn-large--primary[aria-disabled="true"],
.btn-large--primary.is-disabled {
  background-color: var(--idunds-color-button-bg-disabled);
  border-top:       var(--idunds-border-width-button-default) solid transparent;
  border-left:      var(--idunds-border-width-button-default) solid transparent;
  border-right:     var(--idunds-border-width-button-default) solid transparent;
  border-bottom:    var(--idunds-border-width-button-default) solid transparent;
  box-shadow:       none;
  opacity:          var(--idunds-opacity-button-disabled);
  pointer-events:   none;
  cursor:           not-allowed;
}


/* ----------------------------------------------------------
   SECONDARY — Default
   ---------------------------------------------------------- */
.btn-large--secondary {
  background-color: var(--idunds-color-button-bg-secondary);
  color:            var(--idunds-color-button-text-secondary);
  border-top:       var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-left:      var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-right:     var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-bottom:    var(--idunds-border-width-button-accent)  solid var(--idunds-color-button-accent);
  box-shadow:       var(--idunds-shadow-button-default);
}

/* SECONDARY — Hover */
.btn-large--secondary:hover,
.btn-large--secondary.is-hover {
  box-shadow: var(--idunds-shadow-button-raised);
  color:      var(--idunds-color-button-text-interact);
}

/* SECONDARY — Active */
.btn-large--secondary:active,
.btn-large--secondary.is-active {
  border-top:    var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-left:   var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-right:  var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  border-bottom: var(--idunds-border-width-button-default) solid var(--idunds-color-button-accent);
  box-shadow:    var(--idunds-shadow-button-pressed);
  color:         var(--idunds-color-button-text-interact);
}

/* SECONDARY — Disabled */
.btn-large--secondary:disabled,
.btn-large--secondary[aria-disabled="true"],
.btn-large--secondary.is-disabled {
  border-top:    var(--idunds-border-width-button-default) solid var(--idunds-color-button-bg-disabled);
  border-left:   var(--idunds-border-width-button-default) solid var(--idunds-color-button-bg-disabled);
  border-right:  var(--idunds-border-width-button-default) solid var(--idunds-color-button-bg-disabled);
  border-bottom: var(--idunds-border-width-button-default) solid var(--idunds-color-button-bg-disabled);
  box-shadow:    none;
  color:         var(--idunds-color-button-text-disabled);
  opacity:       var(--idunds-opacity-button-disabled);
  pointer-events: none;
  cursor:        not-allowed;
}