:host {
    --bds-card-min-width:336px;
    --bds-card-width:336px;
    --bds-card-height:auto;
    --bds-banner-width: 672px;
    --bds-combobox-width: 336px;
    --bds-border-shape-pill: 50%;
    --bds-color-accent-subtle-10: #0078d4;
    --bds-divider-spacing: 1px;
    --bds-divider-size: 1px;
    --bds-dropdown-max-height: 300px;
    --bds-form-button-width:auto;
    --bds-expansion-panel-group-width: 100%;
    --bds-slide-toggle-width: auto;
    --bds-top-nav-height: 56px;
    --bds-tree-view-width: 304px;
    --bds-proportion-field-width: auto;
    --bds-upload-width: 336px;
}

/*We need to look at the child input element to determine if it is invalid*/
.bds-input-wrapper:has(> input:invalid, > input:user-invalid, > input.invalid){
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-sort-header {
    padding-left: var(--bds-spacer-content-3);
}