/*==========================================================
  NEXIA CORE UI
  File: buttons.css
  Purpose:
      Shared Button System
      WooCommerce
      Contact Form 7
      Moodle
==========================================================*/


/*==========================================================
  BASE BUTTON
==========================================================*/

.nx-btn,

input[type="submit"],

input[type="button"],

input[type="reset"],

.woocommerce button,

.woocommerce .button,

.woocommerce input.button,

.woocommerce a.button,

.woocommerce #respond input#submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:40px;

    padding:14px 20px;

    font-family:var(--nx-font);

    font-size:var(--nx-font-size-md);

    font-weight:var(--nx-weight-bold);

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    border:1px solid transparent;

    border-radius:var(--nx-radius-sm);

    transition:
        background var(--nx-transition),
        color var(--nx-transition),
        border-color var(--nx-transition),
        box-shadow var(--nx-transition),
        transform .25s ease,
        opacity .25s ease;

}


/*==========================================================
  PRIMARY BUTTON
==========================================================*/

.nx-btn-primary,

input[type="submit"],

input[type="button"],

input[type="reset"],

.woocommerce button,

.woocommerce .button,

.woocommerce input.button,

.woocommerce a.button,

.woocommerce #respond input#submit{

    background:var(--nx-primary);

    color:#fff;

    border-color:var(--nx-primary);

    box-shadow:var(--nx-button-shadow);

}


/*==========================================================
BUTTON HOVER
==========================================================*/

.nx-btn:hover,
.nx-btn-primary:hover{

    background:var(--nx-primary);

    color:#fff;

    border-color:var(--nx-primary);

    transform:translateY(-2px);

    box-shadow:var(--nx-glow-hover-shadow);

}

/*==========================================================
BUTTON ACTIVE
==========================================================*/

.nx-btn:active,
.nx-btn-primary:active{

    transform:translateY(0);

    box-shadow:0 0 6px var(--nx-primary-glow);

}


/*==========================================================
  FOCUS
==========================================================*/

.nx-btn:focus-visible,

.nx-btn-primary:focus-visible,

input[type="submit"]:focus-visible,

.woocommerce button:focus-visible,

.woocommerce .button:focus-visible{

    outline:none;

    box-shadow:

        var(--nx-focus-ring),

        var(--nx-button-shadow-hover);

}


/*==========================================================
  FULL WIDTH
==========================================================*/

.nx-btn-block,

.woocommerce form button,

.woocommerce form .button,

.woocommerce form input.button,

.woocommerce form input[type="submit"]{

    display:flex;

    width:100%;

}


/*==========================================================
  DISABLED
==========================================================*/

.nx-btn:disabled,

input:disabled,

.woocommerce button:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*==========================================================
  LOADING
==========================================================*/

.nx-loading{

    position:relative;

    color:transparent !important;

    pointer-events:none;

}

.nx-loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:nx-spin .75s linear infinite;

}


/*==========================================================
  SPINNER
==========================================================*/

@keyframes nx-spin{

    to{

        transform:rotate(360deg);

    }

}


/*==========================================================
  SMALL BUTTON
==========================================================*/

.nx-btn-sm{

    min-height:40px;

    padding:10px 18px;

    font-size:.9rem;

}


/*==========================================================
  LARGE BUTTON
==========================================================*/

.nx-btn-lg{

    min-height:50px;

    padding:16px 30px;

    font-size:1.05rem;

}


/*==========================================================
  ICON BUTTON
==========================================================*/

.nx-btn-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.nx-btn-icon svg{

    width:18px;

    height:18px;

}