/* ==========================================================================
   CB Design System

   Component : Button
   Version   : 1.0.0

   Dependencies:
   - tokens.css
   - base.css

   ========================================================================== */


/* ==========================================================================
   Base
   ========================================================================== */

.cb-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);

    inline-size:auto;
    min-inline-size:max-content;

    height:var(--control-md);

    padding-inline:var(--space-5);

    border:1px solid transparent;
    border-radius:var(--radius-md);

    background:transparent;

    font:inherit;
    font-size:var(--text-md);
    font-weight:var(--font-medium);
    line-height:1;

    text-decoration:none;
    white-space:nowrap;

    cursor:pointer;
    user-select:none;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);

}


/* ==========================================================================
   Sizes
   ========================================================================== */

.cb-btn--sm{

    height:var(--control-sm);

    padding-inline:var(--space-4);

    font-size:var(--text-sm);

}

.cb-btn--md{

    height:var(--control-md);

}

.cb-btn--lg{

    height:var(--control-lg);

    padding-inline:var(--space-6);

    font-size:var(--text-lg);

}


/* ==========================================================================
   Variants
   ========================================================================== */

.cb-btn--solid{

    color:#fff;

    background:var(--color-brand);

}

.cb-btn--solid:hover{

    background:var(--color-brand-hover);

}


.cb-btn--soft{

    color:var(--color-brand);

    background:var(--color-brand-soft);

}

.cb-btn--soft:hover{

    background:var(--color-brand);

    color:#fff;

}


.cb-btn--outline{

    color: var(--color-brand);

    border-color: var(--color-brand);

    background: transparent;

}


.cb-btn--outline:hover{

    background-color: var(--color-brand);

    color:#fff;

}


.cb-btn--ghost{

    color: var(--color-brand);

    background: transparent;

}


.cb-btn--ghost:hover{

    background-color: var(--color-brand-soft);

}


.cb-btn--link{

    padding:0;

    min-height:auto;

    border:none;

    background:none;

    color:var(--color-brand);

}


.cb-btn--link:hover{

    color:var(--color-brand-hover);

}


/* ==========================================================================
   Icon
   ========================================================================== */

.cb-btn__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


/* ==========================================================================
   Label
   ========================================================================== */

.cb-btn__label{

    display:block;

}


/* ==========================================================================
   States
   ========================================================================== */

.cb-btn.is-loading{

    pointer-events:none;

    opacity:.7;

}


.cb-btn:disabled,
.cb-btn.is-disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}


/* ==========================================================================
  focus
   ========================================================================== */

.cb-btn:focus-visible{

    box-shadow:var(--focus-ring);

}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* No responsive styles required in v1.0 */