@use "../colors" as *;
@use "../vars" as *;

// Submit button styling
@mixin submit-buttons {
    .submit-buttons {
        flex: 1 1 100%; // Full width of the available space
        display: flex; // Use flex to align the buttons
        justify-content: space-between; // Space between buttons
        margin-top: 20px; // Space above the buttons

        button {
            width: 48%; 
            text-align: center;
            padding: 12px; 
            border-radius: $input-field-border-radius;

            // Add styles for the clear button
            &.clear-button {
                background-color: $add-user-clear-button-color; 
                color: $add-user-clear-button-text-color; 

                &:hover {
                    background-color: $add-user-clear-button-hover-color; // Hover effect color
                }
            }

            // Existing styles for submit button
            &.submit {
                background-color: $add-user-button-color; 
                color: $add-user-button-text-color;
                border: none;

                &:hover {
                    background-color: $add-user-button-hover-color; // Button hover color
                }                         
            }

            &:active {
                transform: translateY(2px); // Subtle press effect
            }
        }
    }
}