:root {
    --squared-btn-size: 2.25rem;
}

.tng-dark-theme a, .tng-dark-theme .btn-link {
    color: var(--dark-blue-1);
}

.tng-dark-theme .tng-select-field-btn {
    border-radius: 0px;
    border: 1px solid var(--dark-border-1);
}

a, .btn-link {
    color: var(--f-color-3);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: .55;
}

.tng-dark-theme .btn.disabled, .tng-dark-theme .btn:disabled, .tng-dark-theme fieldset:disabled .btn {
    opacity: .40;
}

/*primary button*/
.btn-primary {
    color: var(--textcolor-2);
    background-color: var(--f-color-3);
    border-color: var(--f-color-3);
}

    .btn-primary:hover {
        color: var(--textcolor-2);
        background-color: var(--blue-5);
        border-color: var(--blue-5);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: var(--textcolor-2);
        border-color: var(--gray-4);
        background: var(--gray-4);
    }

.tng-dark-theme .btn-primary:hover {
    background-color: var(--f-color-2);
    border-color: var(--f-color-2);
}

.tng-dark-theme .btn-primary.disabled, .tng-dark-theme .btn-primary:disabled {
    color: var(--textcolor-3);
    border-color: var(--dark-gray-1);
    background: var(--dark-gray-1);
}

/*secondary button*/
.btn-secondary {
    border-color: var(--gray-4);    
}

    .btn-secondary:hover {
        color: var(--textcolor-2);
        border-color: var(--gray-5);
        background: var(--gray-5);
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        color: var(--textcolor-2);
        border-color: var(--gray-4);
        background: var(--gray-4);
    }

.tng-dark-theme .btn-secondary {
    border-color: var(--dark-gray-2);
    background: var(--dark-gray-2);
}

    .tng-dark-theme .btn-secondary:hover {
        color: var(--dark-textcolor-2);
        border-color: var(--dark-gray-1);
        background: var(--dark-gray-1);
    }

    .tng-dark-theme .btn-secondary.disabled, .tng-dark-theme .btn-secondary:disabled {
        color: var(--dark-textcolor-2);
        border-color: var(--dark-gray-1);
        background: var(--dark-gray-1);
    }

/*outline secondary button*/
.btn-outline-secondary {
    color: var(--textcolor-3);
    border-color: var(--gray-5);
}

    .btn-outline-secondary:hover {
        color: var(--textcolor-2);
        background-color: var(--gray-5);
        border-color: var(--gray-5);
    }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: var(--textcolor-3);
        border-color: var(--gray-5);
    }

.tng-dark-theme .btn-outline-secondary {
    color: var(--dark-textcolor-1);
    border-color: var(--dark-gray-1);
    color: var(--dark-white-1);
}

    .tng-dark-theme .btn-outline-secondary:hover {
        color: var(--dark-textcolor-2);
        background-color: var(--dark-gray-1);
        border-color: var(--dark-gray-1);
    }

    .tng-dark-theme .btn-outline-secondary.disabled, .tng-dark-theme .btn-outline-secondary:disabled {
        color: var(--dark-gray-1);
        border-color: var(--dark-gray-1);
    }

/*outline danger button*/
.btn-outline-danger {
    color: var(--f-color-4);
    border-color: var(--f-color-4);

}
    .btn-outline-danger:disabled {
        color: var(--textcolor-3);
        border-color: var(--gray-5);
    }

    .btn-outline-danger:hover {
        color: var(--textcolor-2);
        background-color: var(--f-color-4);
    }

.tng-dark-theme .btn-outline-danger {
    color: var(--dark-red-1);
    border-color: var(--dark-red-1);
}
    .tng-dark-theme .btn-outline-danger:disabled {
        color: var(--dark-gray-1);
        border-color: var(--dark-gray-1);
    }

    .tng-dark-theme .btn-outline-danger:hover {
        color: var(--dark-textcolor-1);
        background-color: var(--dark-red-1);
    }

/*tng*/
.tng-btn {
    margin: var(--tng-btn-margin);
    min-width: var(--tng-btn-min-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tng-btn-two-arrow {
    font-size: var(--button-font-1);
    padding: 0rem 0.75rem;
    min-width: unset;
    box-shadow: unset !important;
    border: none !important;
}

.tng-dark-theme .tng-btn-two-arrow {
    color: var(--dark-textcolor-1);
}

.tng-btn-icon-only {
    margin: var(--tng-btn-icon-only-marg-t-b) var(--tng-btn-icon-only-marg-l-r);
    min-width: var(--squared-btn-size);
    min-height: var(--squared-btn-size);
    white-space: nowrap;
    padding: 0rem; /*einfach zentriert anzeigen, kein padding erforderlich*/
}

.tng-field-btn {
    width: auto;
    border: none;
    border-bottom: 1px solid var(--black);
    border-radius: 0px;
    background-color: transparent;
    margin: 0 var(--twf-input-margin);
}

.tng-dark-theme .tng-field-btn {
    border-bottom: 1px solid var(--dark-white-1);
}

.tng-cl-field-btn {
    background-color: var(--background-1);
}

.tng-dark-theme .tng-cl-field-btn {
    background-color: var(--dark-background-1);
}

.tng-action-btns {
    margin: 0.3rem 0rem;
    padding: 0.25rem;
}