/* eRevisionButtonSimple.css */

/* ------------------------------------
   BUTTON VARIABLES
------------------------------------- */
:root {
    /* Colors */
    --er-btn-primary-bg: var(--color-stark-bla, #0053FF);
    --er-btn-primary-text: white;
    --er-btn-danger-bg: var(--color-stark-rad, #FB5A6C);
    --er-btn-danger-text: white;
    --er-btn-soft-bg: white;
    --er-btn-soft-border: var(--color-stark-bla, #0053FF);
    --er-btn-soft-text: var(--color-stark-bla, #0053FF);
    /* Sizes - Desktop */
    --er-btn-padding: 4px 20px;
    --er-btn-font-size: 16px;
    --er-btn-letter-spacing: 0.07em;
    /* Sizes - Tablet */
    --er-btn-padding-tablet: 4px 20px;
    --er-btn-font-size-tablet: 15px;
    /* Sizes - Mobile */
    --er-btn-padding-mobile: 6px 16px;
    --er-btn-font-size-mobile: 13px;
}

/* ------------------------------------
   BASE BUTTON STYLES
------------------------------------- */
.er-btn {
    /* Basic styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border-radius: 33px;
    border: none;
    /* Typography */
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--er-btn-letter-spacing);
    /* Default sizing */
    padding: var(--er-btn-padding);
    font-size: var(--er-btn-font-size);
    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ------------------------------------
   BUTTON VARIANTS
------------------------------------- */
/* Primary button - blue filled */
.er-btn-primary {
    background-color: var(--er-btn-primary-bg);
    color: var(--er-btn-primary-text);
}

    .er-btn-primary:hover {
        filter: brightness(1.1);
    }

/* Danger button - red filled */
.er-btn-danger {
    background-color: var(--er-btn-danger-bg);
    color: var(--er-btn-danger-text);
}

    .er-btn-danger:hover {
        filter: brightness(1.1);
    }

/* Soft button - outlined */
.er-btn-soft {
    background-color: var(--er-btn-soft-bg);
    border: 1px solid var(--er-btn-soft-border);
    color: var(--er-btn-soft-text);
}

    .er-btn-soft:hover:not(.er-btn-round) {
        background-color: var(--er-btn-soft-border);
        color: var(--er-btn-soft-bg);
    }

/* ------------------------------------
   BUTTON SIZES
------------------------------------- */
/* Small button */
.er-btn-small {
    padding: 5px 15px;
    font-size: calc(var(--er-btn-font-size) - 4px);
}

/* Round icon button */
.er-btn-round {
    border-radius: 50%;
    width: 27px;
    height: 27px;
    padding: 0;
}

/* ------------------------------------
   RESPONSIVE ADJUSTMENTS
------------------------------------- */
/* Tablet adjustments */
@media (max-width: 1023px) {
    .er-btn:not(.er-btn-round) {
        padding: var(--er-btn-padding-tablet);
        font-size: var(--er-btn-font-size-tablet);
    }

    .er-btn-small:not(.er-btn-round) {
        padding: 4px 12px;
        font-size: calc(var(--er-btn-font-size-tablet) - 3px);
    }
    
    .er-btn-round {
        width: 30px;
        height: 30px;
        padding: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .er-btn:not(.er-btn-round) {
        padding: var(--er-btn-padding-mobile);
        font-size: var(--er-btn-font-size-mobile);
    }

    .er-btn-small:not(.er-btn-round) {
        padding: 3px 10px;
        font-size: calc(var(--er-btn-font-size-mobile) - 2px);
    }

    .er-btn-round {
        width: 32px;
        height: 32px;
        padding: 5px;
    }
}

/* ------------------------------------
   SYNCFUSION COMPATIBILITY
------------------------------------- */
/* Ensure icons have proper color */
.er-btn .e-icons,
.er-btn-primary .e-icons,
.er-btn-danger .e-icons {
    color: inherit;
}

/* Ensure focus doesn't add unwanted styles */
.er-btn:focus {
    outline: none;
}

/* State styles */
.er-btn:active {
    transform: scale(0.98);
}

.er-btn[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

/* ------------------------------------
   SPECIAL CASES - SYNCFUSION 
------------------------------------- */
/* Special treatment for SfButton round buttons */
.er-btn.e-round.e-small {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}