@use "sass:color";

@mixin variants {
    @each $type in success, info, warning, error {
        &.fl-#{$type} {
            @content($type);
        }
    }
}

// Legacy close button mixin (for backwards compatibility)
@mixin close-button {
    .fl-close {
        position: absolute;
        right: var(--fl-spacing-md, 0.75rem);
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        font-size: var(--fl-font-size-xl, 1.25rem);
        line-height: 1;
        padding: var(--fl-spacing-xs, 0.25rem);
        cursor: pointer;
        opacity: 0.5;
        transition: opacity var(--fl-duration-fast, 0.15s) ease;
        color: currentColor;
        touch-action: manipulation;

        &:hover, &:focus {
            opacity: 1;
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }
}

// Parameterized close button with size variants
@mixin close-button-sized($size: 'md', $position: 'absolute') {
    .fl-close {
        @if $position == 'absolute' {
            position: absolute;
            right: var(--fl-spacing-md, 0.75rem);
            top: 50%;
            transform: translateY(-50%);
        } @else {
            position: relative;
        }

        background: none;
        border: none;
        cursor: pointer;
        color: currentColor;
        opacity: 0.5;
        transition: opacity var(--fl-duration-fast, 0.15s) ease,
                    transform var(--fl-duration-fast, 0.15s) ease;
        touch-action: manipulation;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;

        @if $size == 'sm' {
            width: var(--fl-close-sm, 1.125rem);
            height: var(--fl-close-sm, 1.125rem);
            font-size: var(--fl-font-size-base, 1rem);
        } @else if $size == 'lg' {
            width: var(--fl-close-lg, 1.875rem);
            height: var(--fl-close-lg, 1.875rem);
            font-size: var(--fl-font-size-xl, 1.25rem);
        } @else {
            width: var(--fl-close-md, 1.5rem);
            height: var(--fl-close-md, 1.5rem);
            font-size: var(--fl-font-size-lg, 1.125rem);
        }

        &:hover, &:focus {
            opacity: 1;
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }
}

// Circular close button variant
@mixin close-button-circular($size: 'md') {
    @include close-button-sized($size, 'relative');

    .fl-close {
        border-radius: var(--fl-radius-full, 9999px);

        &:hover, &:focus {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
}

// Text-style close button (e.g., "DISMISS")
@mixin close-button-text {
    .fl-close {
        background: transparent;
        border: none;
        font-family: inherit;
        font-weight: 500;
        font-size: var(--fl-font-size-sm, 0.875rem);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: var(--fl-spacing-sm, 0.5rem) var(--fl-spacing-md, 0.75rem);
        cursor: pointer;
        color: currentColor;
        border-radius: var(--fl-radius-sm, 0.25rem);
        transition: background-color var(--fl-duration-fast, 0.15s) ease;

        &:hover, &:focus {
            background-color: rgba(0, 0, 0, 0.04);
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }
}

@mixin rtl-support {
    &.fl-rtl {
        .fl-content {
            flex-direction: row-reverse;
        }

        .fl-close {
            right: auto;
            left: var(--fl-spacing-md, 0.75rem);
        }
    }
}

@mixin progress-bar($height: 0.125em) {
    .fl-progress-bar {
        display: flex;
        height: $height;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    @each $type in success, info, warning, error {
        &.fl-#{$type} .fl-progress-bar {
            background-color: var(--#{$type}-color-light, var(--fl-#{$type}-light));

            .fl-progress {
                background-color: var(--#{$type}-color, var(--fl-#{$type}));
                height: 100%;
                width: 100%;
            }
        }
    }
}

@mixin dark-mode {
    @media (prefers-color-scheme: dark) {
        &.fl-auto-dark {
            @content;
        }
    }

    body.fl-dark &,
    html.fl-dark & {
        @content;
    }
}