:global([data-sg-root]) {
    --sg-comp-button-font-size: var(--sg-sys-font-size-500);
    --sg-comp-button-line-height: 1.4285714286;
    --sg-comp-button-padding-x: 0.75rem;
    --sg-comp-button-padding-y: 0.375rem;
    --sg-comp-button-text-color: var(--sg-sys-foreground);
    --sg-comp-button-border-color: var(--sg-sys-border-color);
    --sg-comp-button-border-radius: var(--sg-sys-border-radius);
    --sg-comp-button-border-width: 1px;
    --sg-comp-button-background: transparent;
    --sg-comp-button-active-background: transparent;
    --sg-comp-button-pressed-background: transparent;
}

.btn {
    // By default all icons within button should match with color text
    --sg-comp-icon-color: var(--sg-comp-button-text-color);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    user-select: none;
    vertical-align: middle;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: calc((0.1 / 14) * -1em);
    font-size: var(--sg-comp-button-font-size);
    line-height: var(--sg-comp-button-line-height);
    padding: var(--sg-comp-button-padding-y) var(--sg-comp-button-padding-x);
    color: var(--sg-comp-button-text-color);
    border: var(--sg-comp-button-border-width) solid
        var(--sg-comp-button-border-color);
    border-radius: var(--sg-comp-button-border-radius);
    background-color: var(--sg-comp-button-background);

    &:hover {
        background-color: var(--sg-comp-button-active-background);
    }

    &:focus-visible {
        --sg-comp-button-border-color: var(--sg-sys-accent);

        box-shadow: var(--sg-sys-focus-shadow);
    }

    &:active {
        background-color: var(--sg-comp-button-pressed-background);
    }

    &__ripple {
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        background-color: color-mix(
            in srgb,
            var(--sg-comp-button-active-background) 50%,
            white
        );
    }

    // Variations
    &--primary {
        --sg-comp-button-border-width: 0;
        --sg-comp-button-border-color: transparent;
        --sg-comp-button-text-color: var(--sg-sys-primary-foreground);
        --sg-comp-button-background: var(--sg-sys-primary);
        --sg-comp-button-active-background: color-mix(
            in srgb,
            var(--sg-sys-primary) 87%,
            transparent
        );
        --sg-comp-button-pressed-background: color-mix(
            in srgb,
            var(--sg-sys-primary) 80%,
            transparent
        );
    }

    &--secondary {
        --sg-comp-button-border-width: 0;
        --sg-comp-button-border-color: transparent;
        --sg-comp-button-text-color: var(--sg-sys-secondary-foreground);
        --sg-comp-button-background: var(--sg-sys-secondary);
        --sg-comp-button-active-background: color-mix(
            in srgb,
            var(--sg-sys-secondary) 87%,
            transparent
        );
        --sg-comp-button-pressed-background: color-mix(
            in srgb,
            var(--sg-sys-secondary) 80%,
            transparent
        );
    }

    &--text {
        --sg-comp-button-border-width: 0;
        --sg-comp-button-border-color: transparent;
        --sg-comp-button-text-color: var(--sg-sys-foreground);
        --sg-comp-button-background: transparent;
        --sg-comp-button-active-background: color-mix(
            in srgb,
            var(--sg-sys-secondary) 50%,
            transparent
        );
        --sg-comp-button-pressed-background: color-mix(
            in srgb,
            var(--sg-sys-secondary) 60%,
            transparent
        );
    }

    &--outline {
        --sg-comp-button-border-width: 1px;
        --sg-comp-button-border-color: var(--sg-sys-border-subtle);
        --sg-comp-button-text-color: var(--sg-sys-foreground);
        --sg-comp-button-background: var(--sg-sys-card-background);
        --sg-comp-button-active-background: var(--sg-sys-card-background);
        --sg-comp-button-pressed-background: var(--sg-sys-card-background);

        &:hover {
            --sg-comp-button-border-color: var(--sg-sys-border-color);
        }
    }

    // Sizes
    &--large {
        --sg-comp-button-padding-x: 1rem;
        --sg-comp-button-padding-y: 0.5rem;
        --sg-comp-button-font-size: var(--sg-sys-font-size-700);
    }

    &--small {
        --sg-comp-button-padding-x: 0.4rem;
        --sg-comp-button-padding-y: 0.15rem;
        --sg-comp-button-font-size: var(--sg-sys-font-size-400);
    }

    // Aria-disabled is needed because we do not disable button with disabled
    // attribute since we want to listen events from button anyway, it's
    // important for showing interactive elements like tooltip over disabled
    // button.
    &:disabled,
    &[aria-disabled='true'] {
        // Important that these variable overrides come last in the file so
        // they will override the set variables from variations above.
        --sg-comp-icon-color: color-mix(
            in srgb,
            var(--sg-comp-button-text-color) 50%,
            transparent
        );
        --sg-comp-button-active-background: var(--sg-comp-button-background);
        --sg-comp-button-pressed-background: var(--sg-comp-button-background);

        cursor: not-allowed;
        color: color-mix(
            in srgb,
            var(--sg-comp-button-text-color) 50%,
            transparent
        );
        background-color: color-mix(
            in srgb,
            var(--sg-comp-button-background) 50%,
            transparent
        );
    }

    // Using anchors as custom elements is common practice. In this case we don't want
    // the text to be underlined on hover.
    &:where(a):hover {
        text-decoration: none;
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}