@import 'style.css';

:root {

    /* Spacing */
    --spacing-8:    8px;
    --spacing-12:   12px;
    --spacing-16:   16px;
    --spacing-20:   20px;
    --spacing-24:   24px;

    /* Border radius */
    --radius-btn:   8px;

    /* Border thickness */
    --border-btn:   1px;

    /* Tipografia */
    --font-family-btn:       'Lota Grotesque', sans-serif;
    --font-weight-btn:       600;

    --font-size-lg:          16px;
    --font-size-md:          14px;
    --font-size-sm:          12px;

    --line-height-lg:        20px;
    --line-height-md:        18px;
    --line-height-sm:        16px;

    --letter-spacing-lg:     -0.4px;
    --letter-spacing-md:     -0.3px;
    --letter-spacing-sm:     -0.2px;

}


/* -------------------------------------------------------------
   COLORI PER BOTTONE — variabili locali per color variant
   Ogni classe imposta 3 variabili locali usate da filled /
   outline / transparent in automatico.
   Aggiungere un nuovo colore = solo questo blocco.
   ------------------------------------------------------------- */

.btn--primary {
    --btn-bg:           var(--surface-action-primary);
    --btn-bg-hover:     var(--surface-action-primary-hover);
    --btn-bg-press:     var(--surface-action-primary-pressed);
    --btn-border:       var(--border-action-primary);
    --btn-border-hover: var(--border-action-primary-hover);
    --btn-border-press: var(--border-action-primary-pressed);
    --btn-text:         var(--text-action-primary);
    --btn-text-hover:   var(--text-action-primary-hover);
    --btn-text-press:   var(--text-action-primary-pressed);
}

.btn--secondary {
    --btn-bg:           var(--surface-action-secondary);
    --btn-bg-hover:     var(--surface-action-secondary-hover);
    --btn-bg-press:     var(--surface-action-secondary-pressed);
    --btn-border:       var(--border-action-secondary);
    --btn-border-hover: var(--border-action-secondary-hover);
    --btn-border-press: var(--border-action-secondary-pressed);
    --btn-text:         var(--text-action-secondary);
    --btn-text-hover:   var(--text-action-secondary-hover);
    --btn-text-press:   var(--text-action-secondary-pressed);
}

.btn--disabled,
.btn:disabled {
    --btn-bg:           var(--surface-disabled);
    --btn-bg-hover:     var(--surface-disabled-hover);
    --btn-bg-press:     var(--surface-disabled);
    --btn-border:       var(--border-disabled);
    --btn-border-hover: var(--border-disabled-hover);
    --btn-border-press: var(--border-disabled);
    --btn-text:         var(--text-disabled);
    --btn-text-hover:   var(--text-disabled-hover);
    --btn-text-press:   var(--text-disabled);
    cursor:             not-allowed;
    pointer-events:     none;
}


/* -------------------------------------------------------------
   BASE — .btn
   ------------------------------------------------------------- */
.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    border-width:     var(--border-btn);
    border-style:     solid;
    border-color:     transparent;
    border-radius:    var(--radius-btn);
    font-family:      var(--font-family-btn);
    font-weight:      var(--font-weight-btn);
    text-decoration:  none;
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background-color 0.15s ease,
                      color            0.15s ease,
                      border-color     0.15s ease;
}

.btn__icon img {
    display: block;
    width:   1em;
    height:  1em;
}


/* -------------------------------------------------------------
   SIZE — Large / Medium / Small
   ------------------------------------------------------------- */

/* Large  — altezza 52px */
.btn--large {
    padding:        var(--spacing-16) var(--spacing-24);
    font-size:      var(--font-size-lg);
    line-height:    var(--line-height-lg);
    letter-spacing: var(--letter-spacing-lg);
    min-height:     52px;
}

/* Medium — altezza 44px */
.btn--medium {
    padding:        var(--spacing-12) var(--spacing-20);
    font-size:      var(--font-size-md);
    line-height:    var(--line-height-md);
    letter-spacing: var(--letter-spacing-md);
    min-height:     44px;
}

/* Small  — altezza 36px */
.btn--small {
    padding:        var(--spacing-8) var(--spacing-16);
    font-size:      var(--font-size-sm);
    line-height:    var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
    min-height:     36px;
}


/* -------------------------------------------------------------
   TYPE: Filled
   ------------------------------------------------------------- */
.btn--filled {
    background-color: var(--btn-bg);
    border-color:     var(--btn-bg);
    color:            var(--text-on-action);
}

.btn--filled:hover {
    background-color: var(--btn-bg-hover);
    border-color:     var(--btn-bg-hover);
}

.btn--filled:active {
    background-color: var(--btn-bg-press);
    border-color:     var(--btn-bg-press);
}

.btn--filled.btn--disabled,
.btn--filled:disabled {
    background-color: var(--surface-disabled);
    border-color:     var(--surface-disabled);
    color:            var(--text-disabled);
}


/* -------------------------------------------------------------
   TYPE: Outline
   ------------------------------------------------------------- */
.btn--outline {
    background-color: transparent;
    border-color:     var(--btn-border);
    color:            var(--btn-text);
}

.btn--outline:hover {
    border-color: var(--btn-border-hover);
    color:        var(--btn-text-hover);
}

.btn--outline:active {
    border-color: var(--btn-border-press);
    color:        var(--btn-text-press);
}

.btn--outline.btn--disabled,
.btn--outline:disabled {
    background-color: transparent;
    border-color:     var(--border-disabled);
    color:            var(--text-disabled);
}


/* -------------------------------------------------------------
   TYPE: Transparent
   ------------------------------------------------------------- */
.btn--transparent {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--btn-text);
}

.btn--transparent:hover {
    color: var(--btn-text-hover);
}

.btn--transparent:active {
    color: var(--btn-text-press);
}

.btn--transparent.btn--disabled,
.btn--transparent:disabled {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--text-disabled);
}


/* -------------------------------------------------------------
   BUTTON ICON — .btn-icon (quadrato, solo icona)
   Riutilizza le stesse classi --type e --color del .btn normale.
   ------------------------------------------------------------- */
.btn-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    border-width:     var(--border-btn);
    border-style:     solid;
    border-color:     transparent;
    border-radius:    var(--radius-btn);
    cursor:           pointer;
    transition:       background-color 0.15s ease,
                      color            0.15s ease,
                      border-color     0.15s ease;
}

.btn-icon img {
    display: block;
    width:   50%;
    height:  50%;
}

/* Size */
.btn-icon--large  { width: 64px; height: 64px; }
.btn-icon--medium { width: 48px; height: 48px; }
.btn-icon--small  { width: 32px; height: 32px; }

/* Filled */
.btn-icon.btn--filled {
    background-color: var(--btn-bg);
    border-color:     var(--btn-bg);
    color:            var(--text-on-action);
}

.btn-icon.btn--filled:hover {
    background-color: var(--btn-bg-hover);
    border-color:     var(--btn-bg-hover);
}

.btn-icon.btn--filled:active {
    background-color: var(--btn-bg-press);
    border-color:     var(--btn-bg-press);
}

/* Outline */
.btn-icon.btn--outline {
    background-color: transparent;
    border-color:     var(--btn-border);
    color:            var(--btn-text);
}

.btn-icon.btn--outline:hover {
    border-color: var(--btn-border-hover);
    color:        var(--btn-text-hover);
}

.btn-icon.btn--outline:active {
    border-color: var(--btn-border-press);
    color:        var(--btn-text-press);
}

/* Transparent */
.btn-icon.btn--transparent {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--btn-text);
}

.btn-icon.btn--transparent:hover  { color: var(--btn-text-hover); }
.btn-icon.btn--transparent:active { color: var(--btn-text-press); }

/* Disabled */
.btn-icon.btn--disabled,
.btn-icon:disabled {
    background-color: var(--surface-disabled);
    border-color:     var(--border-disabled);
    color:            var(--text-disabled);
    cursor:           not-allowed;
    pointer-events:   none;
}