*{
    --dca-atom-button-width: auto;
}

/* #region dca-BTN */
.dca-btn{
    align-items: center;
    justify-content: center;
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    background-color: none;
    line-height: normal;
    width: var(--dca-atom-button-width);
    margin: 0;
    min-height: 2.75em;
    min-width: 0;
    outline: none;
    padding: 1em 2.3em;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    border-radius: 0.60em;
    box-sizing: border-box;
}
/* #endregion */
/* #region ***************************************  PRIMARY *****************************************************/
.dca-btn.dca-btn-primary {
    background-color: var(--dc-color-primary);
    border: 0.175em solid var(--dc-color-primary-hover);
    color: var(--dc-color-white);
}


/*PRIMARY DISABLED */
.dca-btn.dca-btn-primary:disabled {
    pointer-events: none;
    background-color: var(--dc-color-primary);
    border-color: var(--dc-color-primary);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*PRIMARY HOVER*/
.dca-btn.dca-btn-primary:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-primary-hover);
    /*box-shadow: var(--dc-color-hover-primary) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-primary-hover);
    /*transform: translateY(-2px);*/
}

/*PRIMARY ACTIVE */
.dca-btn.dca-btn-primary:active {
    box-shadow: none;
    transform: translateY(0);
}

/*PRIMARY OUTLINE */
.dca-btn.dca-btn-outline-primary {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-primary-hover);
    color: var(--dc-color-primary);
}

/*PRIMARY OUTLINE DISABLED */
.dca-btn.dca-btn-outline-primary:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-primary-hover);
    color: var(--dc-color-primary-hover); 
    opacity: 0.7; 
}

/*PRIMARY OUTLINE HOVER*/
.dca-btn.dca-btn-outline-primary:hover {
    color: var(--dc-color-primary-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-primary-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-primary-hover);
    /*transform: translateY(-2px);*/
}

/*PRIMARY OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-primary:active {
    box-shadow: none;
    transform: translateY(0);
}

/* #endregion*/
/* #region ***************************************  SECONDARY *****************************************************/
.dca-btn.dca-btn-secondary {
    background-color: var(--dc-color-secondary);
    border: 0.175em solid var(--dc-color-secondary-hover);
    color: var(--dc-color-white);
}

/*SECONDARY DISABLED */
.dca-btn.dca-btn-secondary:disabled {
    pointer-events: none;
    background-color: var(--dc-color-secondary);
    border-color: var(--dc-color-secondary);
    color: var(--dc-color-white);
    opacity: 0.7; 
}

/*SECONDARY HOVER*/
.dca-btn.dca-btn-secondary:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-secondary-hover);
    /*box-shadow: var(--dc-color-hover-secondary) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-secondary-hover);
    /*transform: translateY(-2px);*/
}

/*SECONDARY ACTIVE */
.dca-btn.dca-btn-secondary:active {
    box-shadow: none;
    transform: translateY(0);
}

/*SECONDARY OUTLINE */
.dca-btn.dca-btn-outline-secondary {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-secondary-hover);
    color: var(--dc-color-secondary);
}

/*SECONDARY OUTLINE DISABLED */
.dca-btn.dca-btn-outline-secondary:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-secondary-hover);
    color: var(--dc-color-secondary-hover); 
    opacity: 0.7; 
}

/*SECONDARY OUTLINE HOVER*/
.dca-btn.dca-btn-outline-secondary:hover {
    color: var(--dc-color-secondary-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-secondary-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-secondary-hover);
    /*transform: translateY(-2px);*/
}

/*SECONDARY OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-secondary:active {
    box-shadow: none;
    transform: translateY(0);
}

/* #endregion */
/* #region ***************************************  SUCCESS *****************************************************/
.dca-btn.dca-btn-success {
    background-color: var(--dc-color-success);
    border: 0.175em solid var(--dc-color-success-hover);
    color: var(--dc-color-white);
}

/*SUCCESS DISABLED */
.dca-btn.dca-btn-success:disabled {
    pointer-events: none;
    background-color: var(--dc-color-success);
    border-color: var(--dc-color-success);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*SUCCESS HOVER*/
.dca-btn.dca-btn-success:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-success-hover);
    /*box-shadow: var(--dc-color-hover-success) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-success-hover);
    /*transform: translateY(-2px);*/
}

/*SUCCESS ACTIVE */
.dca-btn.dca-btn-success:active {
    box-shadow: none;
    transform: translateY(0);
}

/*SUCCESS OUTLINE */
.dca-btn.dca-btn-outline-success {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-success-hover);
    color: var(--dc-color-success);
}

/*SUCCESS OUTLINE DISABLED */
.dca-btn.dca-btn-outline-success:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-success-hover);
    color: var(--dc-color-success-hover); 
    opacity: 0.7; 
}

/*SUCCESS OUTLINE HOVER*/
.dca-btn.dca-btn-outline-success:hover {
    color: var(--dc-color-success-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-success-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-success-hover);
    /*transform: translateY(-2px);*/
}

/*SUCCESS OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-secondary:active {
    box-shadow: none;
    transform: translateY(0);
}
/* #endregion */
/* #region ***************************************  DANGER *****************************************************/
.dca-btn.dca-btn-danger {
    background-color: var(--dc-color-danger);
    border: 0.175em solid var(--dc-color-danger-hover);
    color: var(--dc-color-white);
}

/*DANGER DISABLED */
.dca-btn.dca-btn-danger:disabled {
    pointer-events: none;
    background-color: var(--dc-color-danger);
    border-color: var(--dc-color-danger);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*DANGER HOVER*/
.dca-btn.dca-btn-danger:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-danger-hover);
    /*box-shadow: var(--dc-color-hover-danger) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-danger-hover);
    /*transform: translateY(-2px);*/
}

/*DANGER ACTIVE */
.dca-btn.dca-btn-danger:active {
    box-shadow: none;
    transform: translateY(0);
}

/*DANGER OUTLINE */
.dca-btn.dca-btn-outline-danger {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-danger-hover);
    color: var(--dc-color-danger);
}

/*DANGER OUTLINE DISABLED */
.dca-btn.dca-btn-outline-danger:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-danger-hover);
    color: var(--dc-color-danger-hover); 
    opacity: 0.7; 
}

/*DANGER OUTLINE HOVER*/
.dca-btn.dca-btn-outline-danger:hover {
    color: var(--dc-color-danger-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-danger-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-danger-hover);
    /*transform: translateY(-2px);*/
}

/*DANGER OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-secondary:active {
    box-shadow: none;
    transform: translateY(0);
}
/* #endregion */
/* #region ***************************************  WARNING *****************************************************/
.dca-btn.dca-btn-warning {
    background-color: var(--dc-color-warning);
    border: 0.175em solid var(--dc-color-warning-hover);
    color: var(--dc-color-white);
}

/*WARNING DISABLED */
.dca-btn.dca-btn-warning:disabled {
    pointer-events: none;
    background-color: var(--dc-color-warning);
    border-color: var(--dc-color-warning);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*WARNING HOVER*/
.dca-btn.dca-btn-warning:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-warning-hover);
    /*box-shadow: var(--dc-color-hover-warning) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-warning-hover);
    /*transform: translateY(-2px);*/
}

/*WARNING ACTIVE */
.dca-btn.dca-btn-warning:active {
    box-shadow: none;
    transform: translateY(0);
}

/*WARNING OUTLINE */
.dca-btn.dca-btn-outline-warning {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-warning-hover);
    color: var(--dc-color-warning);
}

/*WARNING OUTLINE DISABLED */
.dca-btn.dca-btn-outline-warning:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-warning-hover);
    color: var(--dc-color-warning-hover); 
    opacity: 0.7; 
}

/*WARNING OUTLINE HOVER*/
.dca-btn.dca-btn-outline-warning:hover {
    color: var(--dc-color-warning-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-warning-hover) 0 8px 15px;  
    border: 0.175em solid var(--dc-color-warning-hover);
    /*transform: translateY(-2px);*/
}

/*WARNING OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-warning:active {
    box-shadow: none;
    transform: translateY(0);
}


/* #endregion */
/* #region ****************************************** INFO *****************************************************/
.dca-btn.dca-btn-info {
    background-color: var(--dc-color-info);
    border: 0.175em solid var(--dc-color-info-hover);
    color: var(--dc-color-white);
}

/*INFO DISABLED */
.dca-btn.dca-btn-info:disabled {
    pointer-events: none;
    background-color: var(--dc-color-info);
    border-color: var(--dc-color-info);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*INFO HOVER*/
.dca-btn.dca-btn-info:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-info-hover);
    /*box-shadow: var(--dc-color-hover-info) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-info-hover);
    /*transform: translateY(-2px);*/
}

/*INFO ACTIVE */
.dca-btn.dca-btn-info:active {
    box-shadow: none;
    transform: translateY(0);
}

/*INFO OUTLINE */
.dca-btn.dca-btn-outline-info {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-info-hover);
    color: var(--dc-color-info);
}

/*INFO OUTLINE DISABLED */
.dca-btn.dca-btn-outline-info:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-info-hover);
    color: var(--dc-color-info-hover); 
    opacity: 0.7; 
}

/*INFO OUTLINE HOVER*/
.dca-btn.dca-btn-outline-info:hover {
    color: var(--dc-color-info-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-info-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-info-hover);
    /*transform: translateY(-2px);*/
}

/*INFO OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-info:active {
    box-shadow: none;
    transform: translateY(0);
}

/* #endregion */
/* #region ****************************************** LIGHT *****************************************************/
.dca-btn.dca-btn-light {
    background-color: var(--dc-color-light);
    border: 0.175em solid var(--dc-color-light-hover);
    color: black;
}

/*LIGHT DISABLED */
.dca-btn.dca-btn-light:disabled {
    pointer-events: none;
    background-color: var(--dc-color-light);
    border-color: var(--dc-color-light);
    color: black; 
    opacity: 0.7; 
}

/*LIGHT HOVER*/
.dca-btn.dca-btn-light:hover {
    color: black;
    background-color: var(--dc-color-light-hover);
    /*box-shadow: var(--dc-color-hover-light) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-light-hover);
    /*transform: translateY(-2px);*/
}

/*LIGHT ACTIVE */
.dca-btn.dca-btn-light:active {
    box-shadow: none;
    transform: translateY(0);
}

/*LIGHT OUTLINE */
.dca-btn.dca-btn-outline-light {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-light-hover);
    color: var(--dc-color-light);
}

/*LIGHT OUTLINE DISABLED */
.dca-btn.dca-btn-outline-light:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-light-hover);
    color: var(--dc-color-light-hover); 
    opacity: 0.7; 
}

/*LIGHT OUTLINE HOVER*/
.dca-btn.dca-btn-outline-light:hover {
    color: var(--dc-color-light-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-light-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-light-hover);
    /*transform: translateY(-2px);*/
}

/*LIGHT OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-light:active {
    box-shadow: none;
    transform: translateY(0);
}

/* #endregion */
/* #region ****************************************** DARK *****************************************************/
.dca-btn.dca-btn-dark {
    background-color: var(--dc-color-dark);
    border: 0.175em solid var(--dc-color-dark-hover);
    color: var(--dc-color-white);
}

/*DARK DISABLED */
.dca-btn.dca-btn-dark:disabled {
    pointer-events: none;
    background-color: var(--dc-color-dark);
    border-color: var(--dc-color-dark);
    color: var(--dc-color-white); 
    opacity: 0.7; 
}

/*DARK HOVER*/
.dca-btn.dca-btn-dark:hover {
    color: var(--dc-color-white);
    background-color: var(--dc-color-dark-hover);
    /*box-shadow: var(--dc-color-hover-dark) 0 8px 15px;*/
    border: 0.175em solid var(--dc-color-dark-hover);
    /*transform: translateY(-2px);*/
}

/*DARK ACTIVE */
.dca-btn.dca-btn-dark:active {
    box-shadow: none;
    transform: translateY(0);
}

/*DARK OUTLINE */
.dca-btn.dca-btn-outline-dark {
    background-color: transparent;
    border: 0.175em solid var(--dc-color-dark-hover);
    color: var(--dc-color-dark);
}

/*DARK OUTLINE DISABLED */
.dca-btn.dca-btn-outline-dark:disabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--dc-color-dark-hover);
    color: var(--dc-color-dark-hover); 
    opacity: 0.7; 
}

/*DARK OUTLINE HOVER*/
.dca-btn.dca-btn-outline-dark:hover {
    color: var(--dc-color-dark-hover);
    background-color: transparent;
    text-shadow: var(--dc-color-dark-hover) 0 8px 15px; 
    border: 0.175em solid var(--dc-color-dark-hover);
    /*transform: translateY(-2px);*/
}

/*DARK OUTLINE ACTIVE */
.dca-btn.dca-btn-outline-dark:active {
    box-shadow: none;
    transform: translateY(0);
}

/* #endregion*/