/* NOTE Buttons Styling, DEPENDS on static/css/common/common.css */
/* Common Button Styling */


/* 
Data Submission Button - Blue
---- USAGE EXAMPLE ----

<div class="form-group">
    {{ basic_details_form.submit(class="submit-btn") }}
</div>

---- END ----
*/

/* 
<link rel="stylesheet" href="{{ url_for('static', filename='css/common/common_buttons.css') }}">
class="submit-btn"

Base
color: var(--text-color-initial);
background-color: var(--background-color-initial);
box-shadow: var(--box-shadow-initial);
transition: var(--transition-fast);
transform: var(--transform-initial-state);

Hover
color: var(--text-color-final);
background-color: var(--background-color-final);
box-shadow: var(--box-shadow-final);
transform: var(--transform-final);

focus
outline: var(--accessibility-focus-outline);
outline-offset: var(--gap-between-button-edge-and-focus-outline);
box-shadow: var(--box-shadow-final); 
*/


/* Submit Buttons */
.submit-btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--button-font-weight);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    width: var(--button-medium-width);
    color: var(--text-color-initial);
    background-color: var(--background-color-initial);
    box-shadow: var(--box-shadow-initial);
    transition: var(--transition-fast);
    transform: var(--transform-initial-state);
}

.submit-btn:hover {
    color: var(--text-color-final);
    background-color: var(--background-color-final);
    box-shadow: var(--box-shadow-final);
    transform: var(--transform-final);
}

/* Focus style - keyboard users (e.g., those with motor disabilities) may not know which element is active, violating accessibility standards like WCAG 2.1 (Web Content Accessibility Guidelines), specifically Success Criterion 2.4.7 (Focus Visible). The .submit-btn:focus  rule ensures compliance by providing a clear visual indicator. */
.submit-btn:focus {
    outline: var(--accessibility-focus-outline);
    outline-offset: var(--gap-between-button-edge-and-focus-outline);
    box-shadow: var(--box-shadow-final);
}




/* 

General Action Button Green
---- USAGE EXAMPLE ----

    <div class="form-group">
        {{ form.submit(class="submit-btn") }}
    </div>

---- END ----
*/


.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    transform: var(--transform-final);
transition: var(--transition-fast);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn.btn-success {
    background-color: var(--alerts-success-bg);
}

.btn.btn-success:hover {
    background-color: var(--alerts-success-hover-bg);
}

/* 
EXIT Button at top right of page
---- USAGE EXAMPLE ----

    <a href='{{ url_for("admin.dashboard") }}' class="exit-icon-container" title="Close" aria-label="Close">
        <i class="fas fa-times"></i>
    </a> 

---- END ----
*/

.exit-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: fixed;
    top: var(--spacing-sm);       /* 10px */
    right: var(--spacing-sm);     /* 10px */
    z-index: 1000;
    background-color: var(--bg-light);
    border-radius: 50%;
    box-shadow: var(--shadow-subtle);
    text-decoration: none;
    cursor: pointer;
}

.exit-icon-container i {
    font-size: var(--font-size-xl); /* 22px */
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.exit-icon-container:hover {
    background-color: var(--background-muted); /* #f9f9f9 or consider --bg-subtle */
}

.exit-icon-container:hover i {
    color: var(--button-delete); /* red */
}


/* 
BACK Button at top left of page
---- USAGE EXAMPLE ----

<a href="{{ url_for('category.create_category') }}" class="back-icon-container" title="Back" aria-label="Back">
    <i class="fas fa-angle-left"></i>  <!-- Or use 'fa-chevron-left' -->
</a>

---- END ----
*/

.back-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: fixed;
    top: var(--spacing-sm);        /* 10px */
    left: var(--spacing-sm);       /* Top left corner */
    z-index: 1000;
    background-color: var(--bg-light);
    border-radius: 50%;
    box-shadow: var(--shadow-subtle);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.back-icon-container i {
    font-size: var(--font-size-xl); /* 22px */
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.back-icon-container:hover {
    background-color: var(--background-muted);
}

.back-icon-container:hover i {
    color: var(--primary-color); /* Highlight with primary color on hover */
}


@media (min-width: 768px) {
    .submit-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 1rem;
        width: 100%;
    }

    .exit-icon-container {
        width: 30px;
        height: 30px;
    }
    .exit-icon-container i {
        font-size: 18px;
    }

    .back-icon-container {
        width: 30px;
        height: 30px;
    }
    .back-icon-container i {
        font-size: 18px;
    }
}