/* ImageButton V2 - V2 UI Component Styling */

.ImageButton--lumina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slds-g-spacing-2);
    height: 40px; /* Matches SLDS spec - all variants use 40px height */
    padding: var(--slds-g-sizing-border-1) var(--slds-g-spacing-4); /* 1px 16px - Matches Figma spec */
    border-radius: var(--slds-g-radius-border-circle);
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-1);
    font-weight: var(--slds-g-font-weight-6);
    line-height: 19px; /* Matches SLDS spec (135.714% of 14px) */
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
    
    /* Tertiary variant: no horizontal padding (matches SLDS spec) */
    /* Note: Icon-only tertiary buttons override this with padding: 0, and flexbox handles centering */
    &.ImageButton--tertiary {
        padding: var(--slds-g-sizing-border-1) 0; /* Vertical padding only - for text-only and icon+text tertiary buttons */
    }
    
    &.ImageButton--icon-only {
        width: 40px; /* Matches height for circular shape */
        height: 40px; /* Explicit height for consistency */
        padding: 0; /* Flexbox (align-items: center, justify-content: center) handles centering for all icon sizes */
        border-radius: var(--slds-g-radius-border-circle); /* Matches SLDS spec - creates perfect circle */
        /* Icon-size-specific padding rules removed - flexbox centers icons of any size automatically */
    }
    
    /* Base icon styles - applies to both SVG (SvgIconMask) and non-SVG (<img>) icons */
    /* Higher specificity (.ImageButton--lumina) ensures pixel values override base .SvgIconMask (1.5em) */
    .ImageButton__icon {
        display: inline-block;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        width: 18px; /* Default size - overrides base .SvgIconMask (1.5em) */
        height: 18px;
        /* vertical-align removed - flexbox (align-items: center) handles alignment */
        
        &.ImageButton__icon--medium {
            width: var(--slds-g-sizing-6);
            height: var(--slds-g-sizing-6);
        }
        
        &.ImageButton__icon--large {
            width: var(--slds-g-sizing-9);
            height: var(--slds-g-sizing-9);
        }
    }
    
    .ImageButton__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        line-height: inherit; /* Inherits from button (19px) for proper vertical alignment */
    }
    
    &.Disabled {
        pointer-events: none;
        cursor: not-allowed;
    }
    
    /* ============ VARIANT-SPECIFIC COLORS ============ */
    
    /* Primary Variant */
    &.ImageButton--primary {
        background-color: var(--slds-g-color-accent-container-1);
        color: var(--slds-g-color-on-accent-1);
        border-color: var(--slds-g-color-transparent);
        
        &.ImageButton--pressed {
            background-color: var(--slds-g-color-accent-container-2);
            color: var(--slds-g-color-on-accent-1);
            border-color: var(--slds-g-color-transparent);
        }
        
        &.Disabled {
            background-color: var(--slds-g-color-disabled-container-2);
            color: var(--slds-g-color-disabled-1);
            border-color: var(--slds-g-color-border-disabled-1);
        }
    }
    
    /* Secondary Variant */
    &.ImageButton--secondary {
        background-color: var(--slds-g-color-surface-container-1);
        color: var(--slds-g-color-accent-2);
        border-color: var(--slds-g-color-border-2);

        &.ImageButton--pressed {
            background-color: var(--slds-g-color-surface-container-2);
            color: var(--slds-g-color-accent-3);
            border-color: var(--slds-g-color-border-2);
        }
        
        &.Disabled {
            background-color: var(--slds-g-color-disabled-container-1);
            color: var(--slds-g-color-disabled-1);
            border-color: var(--slds-g-color-border-disabled-1);
        }
    }
    
    /* Tertiary Variant */
    &.ImageButton--tertiary {
        background-color: var(--slds-g-color-transparent);
        color: var(--slds-g-color-accent-2);
        border-color: var(--slds-g-color-transparent);

        &.ImageButton--pressed {
            background-color: var(--slds-g-color-transparent);
            color: var(--slds-g-color-accent-3);
            border-color: var(--slds-g-color-transparent);
        }
        
        &.Disabled {
            background-color: var(--slds-g-color-transparent);
            color: var(--slds-g-color-disabled-1);
            border-color: var(--slds-g-color-transparent);
        }
    }
    
    /* Primary Destructive Variant */
    &.ImageButton--primary-destructive {
        background-color: var(--color-component-hooks-destructive-button-container-1);
        color: var(--slds-g-color-on-accent-1);
        border-color: var(--slds-g-color-transparent);
        
        &.ImageButton--pressed {
            background-color: var(--slds-g-color-error-1);
            color: var(--slds-g-color-on-accent-1);
            border-color: var(--slds-g-color-transparent);
        }
        
        &.Disabled {
            background-color: var(--slds-g-color-disabled-container-2);
            color: var(--slds-g-color-disabled-1);
            border-color: var(--slds-g-color-border-disabled-1);
        }
    }
    
    /* Secondary Destructive Variant */
    &.ImageButton--secondary-destructive {
        background-color: var(--slds-g-color-surface-container-1);
        color: var(--slds-g-color-error-1);
        border-color: var(--slds-g-color-error-1);
        
        &.ImageButton--pressed {
            background-color: var(--slds-g-color-surface-container-2);
            color: var(--slds-g-color-error-1);
            border-color: var(--slds-g-color-border-error-2);
        }
        
        &.Disabled {
            background-color: var(--slds-g-color-disabled-container-1);
            color: var(--slds-g-color-disabled-1);
            border-color: var(--slds-g-color-border-disabled-1);
        }
    }
    
    /* ============ ICON COLORS PER VARIANT/STATE ============ */
    
    /* Primary Variant Icon Colors */
    &.ImageButton--primary {
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-on-accent-1);
        }
        
        &.ImageButton--pressed .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-on-accent-1);
        }
        
        &.Disabled .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-disabled-1);
        }
    }
    
    /* Secondary Variant Icon Colors */
    &.ImageButton--secondary {
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-accent-2);
        }
        
        &.ImageButton--pressed .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-accent-3);
        }
        
        &.Disabled .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-disabled-1);
        }
    }
    
    /* Tertiary Variant Icon Colors */
    &.ImageButton--tertiary {
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-accent-2);
        }
        
        &.ImageButton--pressed .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-accent-3);
        }
        
        &.Disabled .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-disabled-1);
        }
    }
    
    /* Primary Destructive Variant Icon Colors */
    &.ImageButton--primary-destructive {
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-on-accent-1);
        }
        
        &.ImageButton--pressed .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-on-accent-1);
        }
        
        &.Disabled .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-disabled-1);
        }
    }
    
    /* Secondary Destructive Variant Icon Colors */
    &.ImageButton--secondary-destructive {
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-error-1);
        }
        
        &.ImageButton--pressed .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-error-1);
        }
        
        &.Disabled .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-disabled-1);
        }
    }

    /* Tab Variants (internal — set by TabbedViewAreaSection only, not from contracts) */
    &.ImageButton--tab-selected {
        color: var(--slds-g-color-accent-2);
        border-radius: 0;
        border: none;
        border-bottom: var(--slds-g-sizing-border-3) solid var(--slds-g-color-border-accent-2);
        .ImageButton__label {
            color: inherit;
        }
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-accent-2);
        }
        &.Disabled {
            color: var(--slds-g-color-disabled-1);
            border-bottom-color: var(--slds-g-color-border-disabled-1);
            .ImageButton__icon.SvgIconMask {
                background-color: var(--slds-g-color-disabled-1);
            }
        }
    }

    &.ImageButton--tab-unselected {
        color: var(--slds-g-color-on-surface-1);
        border-radius: 0;
        border: none;
        border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
        .ImageButton__label {
            color: inherit;
        }
        .ImageButton__icon.SvgIconMask {
            background-color: var(--slds-g-color-on-surface-1);
        }
        &.Disabled {
            color: var(--slds-g-color-disabled-1);
            border-bottom-color: var(--slds-g-color-border-disabled-1);
            .ImageButton__icon.SvgIconMask {
                background-color: var(--slds-g-color-disabled-1);
            }
        }
    }

    /* Hide the label and shrink an icon+text button to the collapsed icon box. Default 40px is
       the tablet/desktop visual box (distinct from the phone tap target); phone callers pass 32px. */
    .CollapseLabelToIcon(@collapsed-width: 40px) {
        .ImageButton__label {
            display: none;
        }
        &:not(.ImageButton--icon-only) {
            width: @collapsed-width;
            padding: 0;
        }
    }
    /* Tablet portrait: collapse to icon-only when showPortraitLabel={false}. */
    &.ImageButton--hidePortraitLabel:not(.ImageButton--label-only) {
        @media @tablet {
            .fw-portrait & {
                .CollapseLabelToIcon();
            }
        }
    }
    /* Phone: labels collapse to icon-only by default; showPhoneLabel={true} keeps the label. */
    @media @phone {
        /* Phone uses tighter horizontal padding and no vertical padding (flexbox centers) */
        padding: 0 var(--slds-g-spacing-4);

        /* Phone buttons are 32px tall; pills (icon+text) keep content width, only height shrinks */
        height: var(--slds-g-sizing-9); /* 32px */

        /* Visual size stays 32px, but the tap target must be 40px (touch a11y minimum).
           A transparent ::after overlay enlarges the hit area to 40px without affecting
           paint or layout — clicks on the pseudo-element register on the host button. */
        position: relative;
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            /* Floor the width to 40px so a 32px-wide icon-only button gets a 40x40 tap area.
               NOTE: for buttons narrower than 40px this bleeds ~4px past each visual edge, so
               the overlay is wider than the button. It's transparent and safe at today's ≥12px
               gaps, but any future layout placing another interactive element within ~4px of one
               of these buttons would have its clicks silently swallowed by this overlay. Keep
               that clearance in mind, or scope this floor down, before packing controls tighter. */
            min-width: @imagebutton-phone-tap-size; /* 40px */
            height: @imagebutton-phone-tap-size; /* 40px tap height */
        }

        /* In a ButtonGroup, segments sit edge-to-edge, so extend the tap area only
           vertically (to 40px) — never horizontally — or adjacent segments' hit areas
           would overlap. Width follows the segment's visual width. */
        &.ImageButton--in-group::after {
            min-width: 0;
        }

        &.ImageButton--tertiary {
            padding: 0;
        }

        /* Icon-only becomes a 32x32 square (was 40x40) */
        &.ImageButton--icon-only {
            width: var(--slds-g-sizing-9);
            height: var(--slds-g-sizing-9);
        }

        /* @W-23715463 Phone UX (Lumina): Figma specifies the secondary button's
           border as border-1 (--slds-g-color-border-1); tablet/desktop keep the
           default border-2 set above. Scope the lighter border to phone only, and
           track it in the pressed state so the outline stays consistent while held.
           Disabled keeps border-disabled-1 (inherited from the base rule). */
        &.ImageButton--secondary {
            border-color: var(--slds-g-color-border-1);

            &.ImageButton--pressed {
                border-color: var(--slds-g-color-border-1);
            }
        }

        /* Phone icon glyph is 18px (was 20px via --slds-g-sizing-6). No SLDS token for 18px,
           so this uses the @imagebutton-phone-icon-size variable from variables.less. */
        .ImageButton__icon {
            width: @imagebutton-phone-icon-size;
            height: @imagebutton-phone-icon-size;
        }

        &:not(.ImageButton--showPhoneLabel):not(.ImageButton--label-only) {
            .CollapseLabelToIcon(var(--slds-g-sizing-9)); /* collapse icon+text to the 32px box, not 40px */
        }
    }
}