@import "./variables.css";

.btn {
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.btn:focus {
    outline: none;
}

.btn-primary {
    background-color: var(--btn-primary);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-hover);
    color: white;
}

.btn-primary:active {
    background-color: var(--btn-primary) !important;
    color: white;
    box-shadow: none;
}


.btn-secondary {
    background-color: var(--btn-secondary);
    color: var(--primary-color);
}


.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    color:#fff;
}

.btn-secondary:focus {
    background-color: var(--btn-secondary-hover) !important;
    color: #fff;
    box-shadow: none;
}

.btn-secondary:active {
    background-color: var(--btn-secondary-active);
    color: white;
}
.btn-danger {
    background-color: var(--color-danger);
}
.btn-danger:hover {
    background-color:var(--color-danger-hover) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
}

.text-success {
    color:var(--color-success) !important;
}
.btn-success:hover {
    background-color: var(--color-success-hover) !important;
}
.btn-cancel {
    background-color: #efefef !important;
}

.form-control {
    border-radius: 5px;
    border: 1px solid #ced4da;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: #C4CADA;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(221, 162, 444, 0.5);
}

.form-control.textarea {
    min-height: 120px;
}