feishin/src/shared/components/button/button.module.css

.root {
    font-weight: 500;
    border: 1px solid transparent;
    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-color: var(--theme-colors-surface);

        &: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%);
        }
    }

    &[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%);
        }

        &:focus-visible {
            outline: 1px solid var(--theme-colors-primary-filled);
            outline-offset: 2px;
        }
    }

    &[data-variant='state-error'] {
        background: var(--theme-colors-state-error);

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

    &[data-variant='state-info'] {
        background: var(--theme-colors-state-info);

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

    &[data-variant='state-success'] {
        background: var(--theme-colors-state-success);

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

    &[data-variant='state-warning'] {
        background: var(--theme-colors-state-warning);

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

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

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

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

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

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

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

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

        &:hover {
            background-color: transparent;

            @mixin dark {
                color: lighten(var(--theme-colors-foreground), 10%);
            }

            @mixin light {
                color: darken(var(--theme-colors-foreground), 10%);
            }
        }

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

.loader {
    display: none;
}

.section {
    display: flex;
    margin-inline-end: var(--theme-spacing-sm);
}

.button-inner.loading {
    color: transparent;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.uppercase {
    text-transform: uppercase;
}