:root {
  --woswidgets-accent-color: hsl(212 100% 50% / 1);
  --woswidgets-border-color: hsl(0 0% 46%);
  --woswidgets-border-color: light-dark(hsl(0 0% 46%), hsl(0 0% 52%));
  --woswidgets-background-color: hsl(0 0% 100%);
  --woswidgets-background-color: light-dark(hsl(0 0% 100%), hsl(0 0% 0%));
  --woswidgets-foreground-color: hsl(0 0% 0%);
  --woswidgets-foreground-color: light-dark(hsl(0 0% 0%), hsl(0 0% 100%));
}

.woswidgets-root {
  inline-size: 100%;
  block-size: 100%;
}

.woswidgets-text-field {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: solid 1px var(--woswidgets-border-color);
  background-color: field;
  color: fieldtext;
}

.woswidgets-text-field:has(input:focus-visible) {
  outline: -webkit-focus-ring-color auto 1px;
}

:where(.woswidgets-text-field) input {
  flex: 1 1 100%;
  border: 0;
  border: 0;
  background: 0;
  box-shadow: none;
  color: inherit;
  inline-size: 100%;
  block-size: 100%;
  outline: none;
}

.woswidgets-text-field-slot:where([data-side="left"], [data-side="right"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  block-size: 100%;
}

.woswidgets-text-field-slot:where([data-side="left"]) {
  order: -1;
}

.woswidgets-text-field-slot:where([data-side="right"]) {
  order: 0;
}

:where(.woswidgets-text-field) svg {
  color: inherit;
  fill: currentColor;
}

.woswidgets-select {
  appearance: button;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.woswidgets-menu-item {
  display: flex;
  align-items: center;
  gap: 0.25em;
  user-select: none;

  &:where([data-disabled]) {
    opacity: 0.6;
    pointer-events: none;
  }

  &:where([data-highlighted]) {
    outline: none;
    background-color: var(--woswidgets-accent-color);
    color: hsl(0 0% 100%);
  }
}

.woswidgets-dropdown {
  overflow: hidden;
  background-color: var(--woswidgets-background-color);
  color: var(--woswidgets-foreground-color);
  border: 1px solid var(--woswidgets-border-color);
}

.woswidgets-dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: hsl(0 0% 0% / 0.4);
}

.woswidgets-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  background-color: var(--woswidgets-background-color);
  color: var(--woswidgets-foreground-color);
  border: 1px solid var(--woswidgets-border-color);
}