.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: var(--font-base) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    border: none;
    cursor: pointer;
}

.btn-icon {
    width: 24px;
    height: 24px;
}

/********************--------------------------ESTILOS Tamaño default--------------------------********************/

/********************BOTON PRIMARIO - DEFAULT********************/
.btn-primary {
    border: 2px solid var(--Primary-50) !important;
    background-color: var(--Primary-50) !important;
    color: var(--Gray-00) !important;
}

    .btn-primary:hover {
        background-color: var(--Green-10)  !important;
        border-color: var(--Primary-100)  !important;
        color: var(--Primary-100)  !important;
    }

    .btn-primary:active {
        background-color: var(--Primary-100)  !important;
        border-color: var(--Green-10)  !important;
        color: var(--Green-10)  !important;
    }

    .btn-primary:disabled {
        background-color: var(--Gray-20)  !important;
        border-color: var(--Gray-20)  !important;
        color: var(--Gray-55)  !important;
        cursor: not-allowed !important;
    }



/********************BOTON SECUNDARIO - DEFAULT********************/
.btn-secondary {
    border: 2px solid var(--Primary-50)  !important;
    background-color: var(--Gray-00)  !important;
    color: var(--Primary-50)  !important;
}

    .btn-secondary:hover {
        background-color: var(--Primary-2)  !important; /* Primary 2 */
        color: var(--Primary-50) !important;
    }

    .btn-secondary:active {
        border: 2px solid var(--Primary-2)  !important;
        background-color: var(--Primary-2)  !important; /* Presionado */
    }

    .btn-secondary:disabled {
        background-color: var(--Gray-00)  !important; /* Gray 00 */
        border-color: var(--Gray-55)  !important; /* Gray 55 */
        color: var(--Gray-55)  !important;
        cursor: not-allowed;
    }

/********************BOTON TERCIARIO - DEFAULT********************/
.btn-tertiary {
    border: 2px solid var(--Primary-2)  !important;
    background: var(--Primary-2)  !important;
    color: var(--Primary-50)  !important;
}

    .btn-tertiary:hover {
        border-color: var(--Primary-50)  !important;
        background: var(--Primary-2)  !important;
        color: var(--Primary-50)  !important;
    }

    .btn-tertiary:active {
        background: var(--Primary-2)  !important;
        border-color: var(--Primary-2)  !important;
        color: var(--Primary-50) !important;
    }

    .btn-tertiary:disabled {
        background: var(--Gray-20)  !important;
        border-color: var(--Gray-20)  !important;
        color: var(--Gray-55)  !important;
        cursor: not-allowed;
    }



/********************--------------------------ESTILOS DARK Tamaño default--------------------------********************/

/********************BOTON PRIMARIO DARK - DEFAULT********************/
.btn-primary-dark {
    border: 2px solid var(--Primary-100) !important;
    background: var(--Green-10) !important;
    color: var(--Primary-100) !important;
}

    .btn-primary-dark:hover {
        background: var(--Gray-00) !important;
        border-color: var(--Primary-50) !important;
        color: var(--Primary-50) !important;
    }

    .btn-primary-dark:active {
        background: var(--Gray-20) !important;
        border-color: var(--Primary-50) !important;
        color: var(--Primary-50) !important;
    }

    .btn-primary-dark:disabled {
        background: var(--Gray-35) !important;
        border-color: var(--Gray-55) !important;
        color: var(--Gray-55) !important;
        cursor: not-allowed;
    }


/********************BOTON SECUNDARIO DARK - DEFAULT********************/
.btn-secondary-dark {
    border: 2px solid var(--Gray-transparencia-25) !important;
    background: var(--Gray-transparencia-25) !important;
    color: var(--color-gray-00) !important;
}

    .btn-secondary-dark:hover {
        background: var(--Gray-transparencia-25) !important;
        border-color: var(--Gray-transparencia-55) !important;
    }

    .btn-secondary-dark:active {
        background: var(--Gray-transparencia-00) !important;
        border-color: transparent;
    }

    .btn-secondary-dark:disabled {
        background: var(--Gray-transparencia-00) !important;
        border-color: var(--Gray-transparencia-25) !important;
        color: var(--Gray-transparencia-25) !important;
        cursor: not-allowed;
    }

/********************BOTON TERCIARIO DARK - DEFAULT********************/
.btn-tertiary-dark {
    border: 2px solid transparent;
    background: var(--Gray-transparencia-00) !important;
    color: var(--Gray-20) !important;
}

    .btn-tertiary-dark:hover {
        border-color: var(--Gray-transparencia-55) !important;
        background: var(--Gray-transparencia-00) !important;
        color: var(--Gray-20) !important;
    }

    .btn-tertiary-dark:active {
        border: 2px solid transparent;
        background: var(--Gray-transparencia-00) !important;
        color: var(--Gray-20) !important;
    }

    .btn-tertiary-dark:disabled {
        background: var(--Gray-transparencia-00) !important;
        border: 2px solid transparent;
        color: var(--Gray-transparencia-25) !important;
        cursor: not-allowed;
    }



/********************--------------------------ESTILOS Tamaño--------------------------********************/

/********************BOTON - sm ********************/
.btn-sm {
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.btn-icon-sm {
    width: 16px !important;
    height: 16px !important;
}
/********************BOTON - xs ********************/
.btn-xs {
    padding: 8px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.btn-icon-xs {
    font-size: 14px !important;
    width: 16px !important;
    height: 16px !important;
}