:host {
  /*Sizes*/
  --height: var(--jb-select-height, 2.5rem);
  /*its rounded because it's only one value and not all radius 4 part value and needed to be one vale due to change in different situation*/
  --rounded: var(--jb-select-rounded, var(--jb-radius));
  --box-border-radius: var(--jb-select-box-border-radius, var(--rounded));
  --list-border-radius: 0 0 var(--rounded) var(--rounded);
  --border-width: var(--jb-select-border-width, 1px);
  --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
  --base-z-index: var(--jb-select-base-z-index, 1);
  --selected-value-font-size:var(--jb-select-selected-value-font-size, 1rem);
  --input-font-size:var(--jb-select-input-font-size, 1rem);
  --selected-value-padding:var(--jb-select-selected-value-padding, 0.125rem 0.75rem 0 0.75rem);
  --inline-slots-padding:0.375rem 0.625rem;
  --clear-icon-size: 1rem;
  /* put message and label forward base on border radius*/
  --inline-space: calc(var(--rounded) / 1.75);
  --label-margin: var(--jb-select-label-margin, 0.125rem var(--inline-space));
  --label-font-size: var(--jb-select-label-font-size, 0.8rem);
  --message-font-size:var(--jb-select-message-font-size, 0.7rem);
  /*colors*/
  --border-color: var(--jb-select-border-color, var(--jb-neutral-10));
  --message-color: var(--jb-select-message-color, var(--jb-text-secondary));
  --label-color: var(--jb-select-label-color, var(--jb-text-primary));
  --value-color: var(--jb-select-value-color, var(--jb-text-primary));
  --placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));
  --select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));
  --overlay-bg-color: var(--jb-select-overlay-bg-color, oklch(from var(--jb-black) l c h / calc(alpha - 0.5)));
  --list-scroll-color: var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));
  --empty-list-placeholder-color: var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
}

:host(:state(invalid)) {
  --message-color: var(--jb-select-message-color-error, var(--jb-red));
}
:host(:state(disabled)) {
 cursor: not-allowed;
 --select-box-bg-color: var(--jb-select-bg-color-disabled, hsl(from var(--jb-neutral-10) h 12% 66.1));
 --value-color:var(--jb-select-value-color-disabled, var(--jb-neutral-3));
}
:host(:focus-within:not(:state(disabled))) {
  --border-color: var(--jb-select-border-color-focus, var(--jb-neutral));
}

/*Size*/
 :host([size="xs"]){
  --height:var(--jb-select-height-xs, 1.5rem);
  --selected-value-font-size:var(--jb-select-selected-value-font-size-xs, 0.75rem);
  --input-font-size:var(--jb-select-input-font-size-xs, 0.75rem);
  --label-font-size:var(--jb-select-label-font-size-xs, 0.6rem);
  /*0.7 - (0.0875 *2) */
  --message-font-size:var(--jb-select-message-font-size-xs, 0.525rem);
  /* 0.375 = radius-xs - (0.25*radius-xs) */
  --selected-value-padding:var(--jb-select-selected-value-padding-xs, 0.125rem 0.375rem 0 0.375rem);
  --rounded: var(--jb-select-rounded-xs, var(--jb-radius-xs));
  --inline-slots-padding:0.125rem 0.25rem;
  --clear-icon-size: 0.5rem;
}

:host([size="sm"]){
  --height: var(--jb-select-height-sm, 2rem);
  --selected-value-font-size:var(--jb-select-selected-value-font-size-sm, 0.875rem);
  --input-font-size:var(--jb-select-input-font-size-sm, 0.875rem);
  --label-font-size:var(--jb-select-label-font-size-sm, 0.7rem);
  --message-font-size:var(--jb-select-message-font-size-sm, 0.6125rem);
  --selected-value-padding:var(--jb-select-selected-value-padding-sm, 0.125rem 0.5625rem 0 0.5625rem);
  --rounded: var(--jb-select-rounded-sm, var(--jb-radius-sm));
  --inline-slots-padding:0.25rem 0.5rem;
  --clear-icon-size: 0.75rem;
}

:host([size="lg"]){
  --height: var(--jb-select-height-lg, 3rem);
  --selected-value-font-size:var(--jb-select-selected-value-font-size-lg, 1.125rem);
  --input-font-size:var(--jb-select-input-font-size-lg, 1.125rem);
  --label-font-size:var(--jb-select-label-font-size-lg, 0.9rem);
    /*0.7 + 0.0875*/
  --message-font-size:var(--jb-select-message-font-size-lg, 0.7875rem);
 --selected-value-padding:var(--jb-select-selected-value-padding-lg, 0.125rem 0.9375rem 0 0.9375rem);
  --rounded: var(--jb-select-rounded-lg, var(--jb-radius-lg));
  --inline-slots-padding:0.5rem 0.75rem;
}

:host([size="xl"]){
  --height: var(--jb-select-height-xl, 4rem);
  --selected-value-font-size:var(--jb-select-selected-value-font-size-xl, 1.25rem);
  --input-font-size:var(--jb-select-input-font-size-xl, 1.25rem);
  --label-font-size:var(--jb-select-label-font-size-xl, 1rem);
  --message-font-size:var(--jb-select-message-font-size-xl, 0.875rem);
  --selected-value-padding:var(--jb-select-selected-value-padding-xl, 0.125rem 1.125rem 0 1.125rem);
  --rounded: var(--jb-select-rounded-xl, var(--jb-radius-xl));
  --inline-slots-padding:0.75rem 1rem;
}