:root {
    --app-btn-white: var(--app-white);
    --app-btn-black: var(--app-black);

    --app-btn-light: var(--app-light);
    --app-btn-dark: var(--app-dark);

    --app-btn-primary: var(--app-primary);
    --app-btn-primary-outlined: var(--app-primary-soft);
    --app-btn-primary-dark: var(--app-primary-dark);

    --app-btn-secondary: var(--app-secondary);
    --app-btn-secondary-outlined: var(--app-secondary-soft);
    --app-btn-secondary-dark: var(--app-secondary-dark);

    --app-btn-accent: var(--app-accent);
    --app-btn-accent-outlined: var(--app-accent-soft);
    --app-btn-accent-dark: var(--app-accent-dark);

    --app-btn-success: var(--app-success);
    --app-btn-success-outlined: var(--app-success-soft);
    --app-btn-success-dark: var(--app-success-dark);

    --app-btn-warning: var(--app-warning);
    --app-btn-warning-outlined: var(--app-warning-soft);
    --app-btn-warning-dark: var(--app-warning-dark);

    --app-btn-danger: var(--app-danger);
    --app-btn-danger-outlined: var(--app-danger-soft);
    --app-btn-danger-dark: var(--app-danger-dark);

    --app-btn-layer-one: var(--app-layer-one);
    --app-btn-layer-two: var(--app-layer-two);
    --app-btn-layer-three: var(--app-layer-three);
    --app-btn-layer-four: var(--app-layer-four);
    --app-btn-layer-five: var(--app-layer-five);
}

.btn {
    position: relative;
    transition: top 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}

.btn:hover {
    top: -1px;
    box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.3) !important;
}

.btn-app-primary {
    background-color: var(--app-btn-primary) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-primary-dark {
    background-color: var(--app-btn-primary-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-primary-outlined {
    color: var(--app-btn-primary) !important;
    border: 1px solid var(--app-btn-primary) !important;
}

.btn-app-secondary {
    background-color: var(--app-btn-secondary) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-secondary-dark {
    background-color: var(--app-btn-secondary-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-secondary-outlined {
    color: var(--app-btn-secondary) !important;
    border: 1px solid var(--app-btn-secondary-dark) !important;
}

.btn-app-accent {
    background-color: var(--app-btn-accent) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-accent-dark {
    background-color: var(--app-btn-accent-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-accent-outlined {
    color: var(--app-btn-accent-dark) !important;
    border: 1px solid var(--app-btn-accent-dark) !important;
}

.btn-app-danger {
    background-color: var(--app-btn-danger) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-danger-dark {
    background-color: var(--app-btn-danger-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-danger-outlined {
    color: var(--app-btn-danger-dark) !important;
    border: 1px solid var(--app-btn-danger-dark) !important;
}

.btn-app-success {
    background-color: var(--app-btn-success) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-success-dark {
    background-color: var(--app-btn-success-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-success-outlined {
    color: var(--app-btn-success-dark) !important;
    border: 1px solid var(--app-btn-success-dark) !important;
}

.btn-app-warning {
    background-color: var(--app-btn-warning) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-warning-dark {
    background-color: var(--app-btn-warning-dark) !important;
    color: var(--app-btn-layer-one) !important;
    border: none;
}

.btn-app-warning-outlined {
    color: var(--app-btn-warning-dark) !important;
    border: 1px solid var(--app-btn-warning-dark) !important;
}

.btn-app-light {
    background-color: var(--app-btn-light) !important;
    color: var(--app-btn-dark) !important;
    border: none;
}

.btn-app-dark {
    background-color: var(--app-btn-dark) !important;
    color: var(--app-btn-light) !important;
    border: none;
}
