feishin/src/shared/components/action-icon/action-icon.module.css

.root {
    --ai-size-xs: calc(1.875rem * var(--mantine-scale));
    --ai-size-sm: calc(2.25rem * var(--mantine-scale));
    --ai-size-md: calc(2.625rem * var(--mantine-scale));
    --ai-size-lg: calc(3.125rem * var(--mantine-scale));
    --ai-size-xl: calc(3.75rem * var(--mantine-scale));
    --ai-size-compact-xs: calc(1.5rem * var(--mantine-scale));
    --ai-size-compact-sm: calc(1.75rem * var(--mantine-scale));
    --ai-size-compact-md: calc(2rem * var(--mantine-scale));

    font-weight: 500;
    transition:
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;

    &[data-disabled='true'] {
        opacity: 0.6;
    }

    &[data-variant='default'] {
        color: var(--theme-colors-foreground);
        background: var(--theme-colors-surface);
        border: 1px solid transparent;

        &:hover {
            background: lighten(var(--theme-colors-surface), 5%);
        }

        &:focus-visible {
            background: lighten(var(--theme-colors-surface), 10%);
        }
    }

    &[data-variant='outline'] {
        --button-border: var(--theme-colors-border);

        color: var(--theme-colors-foreground);
        border: 1px solid var(--theme-colors-border);

        &:hover {
            border: 1px solid lighten(var(--theme-colors-border), 10%);
        }

        &:focus-visible {
            border: 1px solid lighten(var(--theme-colors-border), 10%);
        }

        svg {
            color: var(--theme-colors-primary);
            fill: var(--theme-colors-primary);
        }
    }

    &[data-variant='filled'] {
        color: var(--theme-colors-primary-contrast);
        background: var(--theme-colors-primary-filled);
        border: 1px solid transparent;
        transition: background-color 0.2s ease-in-out;

        &:hover,
        &:focus-visible {
            background: darken(var(--theme-colors-primary-filled), 10%);
        }

        svg {
            color: var(--theme-colors-primary-contrast);
            fill: var(--theme-colors-primary-contrast);
        }
    }

    &[data-variant='subtle'] {
        color: var(--theme-colors-foreground);
        background: transparent;

        &:hover,
        &:active,
        &:focus-visible {
            @mixin dark {
                background: lighten(var(--theme-colors-background), 5%);
            }

            @mixin light {
                background: darken(var(--theme-colors-background), 5%);
            }
        }

        &[data-disabled='true'] {
            background: transparent;
        }
    }

    &[data-variant='secondary'] {
        border: 1px solid transparent;

        &:hover {
            background: darken(var(--theme-colors-surface), 5%);
        }

        &:focus-visible {
            background: darken(var(--theme-colors-surface), 10%);
        }
    }

    &[data-variant='transparent'] {
        color: var(--theme-colors-foreground);
        border: 1px solid transparent;

        &:hover {
            background: transparent;
        }

        &:focus-visible {
            border: 1px solid lighten(var(--theme-colors-border), 10%);
        }
    }

    &[data-size='compact-xs'] {
        width: var(--ai-size-compact-xs);
        min-width: var(--ai-size-compact-xs);
        height: var(--ai-size-compact-xs);
        min-height: var(--ai-size-compact-xs);
    }

    &[data-size='compact-sm'] {
        width: var(--ai-size-compact-sm);
        min-width: var(--ai-size-compact-sm);
        height: var(--ai-size-compact-sm);
        min-height: var(--ai-size-compact-sm);
    }

    &[data-size='compact-md'] {
        width: var(--ai-size-compact-md);
        min-width: var(--ai-size-compact-md);
        height: var(--ai-size-compact-md);
        min-height: var(--ai-size-compact-md);
    }
}