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

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

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

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

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

    --app-btn-danger: var(--app-red);
    --app-btn-danger-outlined: var(--app-red-soft);
    --app-btn-danger-dark: var(--app-red-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);
}

.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;
}
