:global([data-sg-root]) {
    --sg-comp-input-padding: 0.5rem;
    --sg-comp-input-focus-shadow-color: var(--sg-sys-accent);
    --sg-comp-input-border-color: var(--sg-sys-border-color);
    --sg-comp-input-border-active: var(--sg-sys-border-active-color);
    --sg-comp-input-font-size: var(--sg-sys-font-size-500);
}

.wrapper {
    // Local overrides for icons
    --sg-comp-icon-size: 1lh;
    --sg-comp-spinner-size: 1lh;
    --sg-comp-icon-color: var(--sg-comp-input-border-active);

    width: 100%;
    position: relative;

    &--inline {
        display: inline-block;
    }
}

.input {
    width: 100%;
    outline: none;
    padding: var(--sg-comp-input-padding);
    border-radius: var(--sg-sys-border-radius);
    border: 1px solid var(--sg-comp-input-border-color);
    color: var(--sg-sys-foreground);
    background-color: var(--sg-sys-input-background);
    font-size: var(--sg-comp-input-font-size);
    font-weight: normal;

    &:focus-within {
        border-color: var(--sg-comp-input-border-active);
        box-shadow: 0 0 0 3px
            color-mix(
                in oklch,
                var(--sg-comp-input-focus-shadow-color) 65%,
                transparent
            );
    }

    &::placeholder {
        color: var(--sg-sys-muted-foreground);
    }

    &:disabled {
        opacity: 0.75;
        cursor: not-allowed;
    }

    &--with-icon {
        padding-right: calc(
            var(--sg-comp-input-padding) * 2 + var(--sg-comp-icon-size)
        );
    }
}

.icon {
    display: flex;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

// Validation variations
.invalid {
    --sg-comp-input-focus-shadow-color: var(--sg-sys-destructive);
    --sg-comp-input-border-color: var(--sg-sys-destructive);
    --sg-comp-input-border-active: var(--sg-sys-destructive);
}

.valid {
    --sg-comp-input-focus-shadow-color: var(--sg-ref-green-500);
    --sg-comp-input-border-color: var(--sg-ref-green-500);
    --sg-comp-input-border-active: var(--sg-ref-green-500);
}

// Size variations
.small {
    --sg-comp-input-padding: 0.375rem 0.625rem;
    --sg-comp-input-font-size: var(--sg-sys-font-size-400);

    height: 2rem;
}

// Visual variations
.ghost {
    border: none;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid var(--sg-sys-border-color);

    &:focus {
        box-shadow: none;
        border-bottom-color: var(--sg-sys-accent);
    }

    &:hover:not(:disabled) {
        border-bottom-color: var(--sg-sys-border-active-color);
    }
}