:root {
    /* Background */
    --color-input-bg-default: var(--color-bg-main);
    --color-input-withlabel-bg-default: var(--color-bg-main);
    --color-input-withlabel-bg-disable: var(--color-bg-main-disable);
    --color-input-outlined-bg: var(--color-bg-main-secondary);
    
    /* Border */
    --color-input-withlabel-border-default: var(--color-border-neutral);
    --color-input-withlabel-border-hover: var(--color-border-neutral-secondary);
    --color-input-withlabel-border-focus: var(--color-border-primary);
    --color-input-withlabel-border-error: var(--color-border-error);
    --color-input-outlined-border-hover: var(--color-border-tertiary);
    --color-input-outlined-border-focus: var(--color-border-primary);
    --color-input-outlined-border-error: var(--color-border-error);

    /* Label */
    --color-input-withlabel-label-default: var(--color-text-primary);

    /* Supporting text */
    --color-input-withlabel-supportingtext: var(--color-text-secondary);
    --color-input-withlabel-supportingtext-error: var(--color-text-error);
    --color-input-outlined-supporting-text: var(--color-text-secondary);
    --color-input-outlined-supporting-text-error: var(--color-text-error);

    /* Value text */
    --color-input-withlabel-value-default: var(--color-text-primary);
    --color-input-withlabel-value-disable: var(--color-text-disable);
    --color-input-outlined-value: var(--color-text-primary);
    --color-input-outlined-value-disable: var(--color-text-disable);

    /* Placeholder text */
    --color-input-withlabel-placeholder: var(--color-text-tertiary);
    --color-input-nolabel-placeholder: var(--color-text-secondary);

    /* Icons */
    --color-input-withlabel-icon-default: var(--color-icon-primary);
    --color-input-withlabel-icon-disable: var(--color-icon-disable);
    --color-input-outlined-icon-default: var(--color-icon-primary);

    /* Dimensions */
    --size-input-withlabel-height-lg: var(--size-control-lg);
    --size-input-withlabel-height-md: var(--size-control-md);
    --size-input-withlabel-height-sm: var(--size-control-sm);

    --size-input-withlabel-padding-x-lg: var(--padding-x-xs);
    --size-input-withlabel-padding-x-md: var(--padding-x-xs);
    --size-input-withlabel-padding-x-sm: var(--padding-x-xs);

    --size-input-outlined-height-lg: var(--size-control-lg);
    --size-input-outlined-height-md: var(--size-control-md);
    --size-input-outlined-height-sm: var(--size-control-sm);

    --size-input-outlined-padding-x-lg: var(--padding-x-xs);
    --size-input-outlined-padding-x-md: var(--padding-x-xs);
    --size-input-outlined-padding-x-sm: var(--padding-x-xs);

    /* Font sizes */
    --font-input-withlabel-label-lg: var(--body-md);
    --font-input-withlabel-label-md: var(--body-md);
    --font-input-withlabel-label-sm: var(--body-sm);

    --font-input-withlabel-placeholder-lg: var(--body-sm);
    --font-input-withlabel-placeholder-md: var(--body-sm);
    --font-input-withlabel-placeholder-sm: var(--body-sm);

    --font-input-withlabel-supportingtext-lg: var(--body-xs);
    --font-input-withlabel-supportingtext-md: var(--body-xs);
    --font-input-withlabel-supportingtext-sm: var(--body-xs);

    --font-input-withlabel-value-lg: var(--body-sm);
    --font-input-withlabel-value-md: var(--body-sm);
    --font-input-withlabel-value-sm: var(--body-sm);

    --font-input-outlined-placeholder-lg: var(--body-sm);
    --font-input-outlined-placeholder-md: var(--body-sm);
    --font-input-outlined-placeholder-sm: var(--body-sm);

    --font-input-outlined-supportingtext-lg: var(--body-xs);
    --font-input-outlined-supportingtext-md: var(--body-xs);
    --font-input-outlined-supportingtext-sm: var(--body-xs);

    --font-input-outlined-value-lg: var(--body-sm);
    --font-input-outlined-value-md: var(--body-sm);
    --font-input-outlined-value-sm: var(--body-sm);

    /* Icon sizes */
    --icon-input-withlabel-leading-lg: var(--icon-size-sm);
    --icon-input-withlabel-leading-md: var(--icon-size-sm);
    --icon-input-withlabel-leading-sm: var(--icon-size-sm);

    --icon-input-withlabel-trailing-lg: var(--icon-size-sm);
    --icon-input-withlabel-trailing-md: var(--icon-size-sm);
    --icon-input-withlabel-trailing-sm: var(--icon-size-sm);

    --icon-input-outlined-leading-lg: var(--icon-size-sm);
    --icon-input-outlined-leading-md: var(--icon-size-sm);
    --icon-input-outlined-leading-sm: var(--icon-size-sm);

    --icon-input-outlined-trailing-lg: var(--icon-size-sm);
    --icon-input-outlined-trailing-md: var(--icon-size-sm);
    --icon-input-outlined-trailing-sm: var(--icon-size-sm);

    /* Border widths */
    --border-width-input-withlabel-default: var(--border-width-sm);
    --border-width-input-withlabel-hover: var(--border-width-md);
    --border-width-input-withlabel-focus: var(--border-width-md);
    --border-width-input-withlabel-error: var(--border-width-md);
    --border-width-input-withlabel-disable: var(--border-width-sm);

    --border-width-input-outlined-focus: var(--border-width-md);
    --border-width-input-outlined-error: var(--border-width-md);

    /* Border radius */
    --border-radius-input-withlabel: var(--border-radius-xs);
    --border-radius-input-outlined: var(--border-radius-xs);

    /* Spacing */
    --spacing-input-withlabel-label-container-supportingtext: var(--spacing-sm);
    --spacing-input-withlabel-container-items: var(--spacing-xs);

    --spacing-input-outlined-container-supportingtext: var(--spacing-sm);
    --spacing-input-outlined-container-items: var(--spacing-xs);
}

.input-withlabel {
    display: flex;
    height: var(--size-control-lg);
    padding: 0 var(--padding-x-sm);
    align-items: center;
    gap: var(--spacing-xs);
    align-self: stretch;
    border-radius: var(--border-radius-xs);
    border: var(--border-width-sm) solid var(--color-input-withlabel-border-default);
    background: var(--color-input-withlabel-bg-default);
}