/* lib/uwc-input/types/file.css */
@layer unstyled-web-components {
  uwc-input[type=file] {
    & > [part=root] {
      [part=control] {
        display: flex;
        align-items: baseline;
        gap: 3px;
        [part=placeholder] {
          visibility: hidden;
          white-space: nowrap;
          font-size: 0.85em;
          ul[part=files]:empty ~ [part=control] & {
            visibility: visible;
          }
        }
      }
      ul[part=files] {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

/* lib/uwc-input/types/text.css */
@layer unstyled-web-components {
  uwc-input:is([type=text], [type=search]) {
    display: flex;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 2px 3px;
    height: min-content;
    width: 172px;
    position: relative;
    font-family: Arial;
    font-size: 13.3333px;
    cursor: text;
    overflow: hidden;
    &[disabled] {
      pointer-events: none;
      background: var(--disabled-background);
    }
    & > [part=root] {
      overflow: hidden;
      &[hidden] {
        display: initial;
        width: fit-content;
      }
      uwc-input:has(> [part=values].empty) &:has([contenteditable]:empty) {
        flex-basis: 100%;
      }
      [contenteditable] {
        width: 100%;
        outline: none;
        height: 1lh;
        white-space: nowrap;
        [hidden] & {
          opacity: 0;
          width: 0;
        }
      }
      [part=placeholder] {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        visibility: hidden;
        color: gray;
        uwc-input:has(> [part=values].empty) [contenteditable]:empty + & {
          visibility: visible;
        }
      }
    }
    & > dialog[popover] {
      cursor: default;
      [aria-selected=true] {
        background: blue;
        color: white;
      }
      [aria-current=true] {
        background: highlight;
        color: highlightText;
      }
    }
  }
}

/* lib/uwc-input/types/number.css */
@layer unstyled-web-components {
  uwc-input[type=number] {
    cursor: text;
    display: flex;
    border-radius: 2px;
    padding: 2px 3px;
    height: min-content;
    width: 172px;
    position: relative;
    font-family: Arial;
    font-size: 13.3333px;
    border: 1px solid gray;
    &[disabled] {
      pointer-events: none;
      background: var(--disabled-background);
    }
    & > [part=root] {
      [contenteditable] {
        outline: none;
        width: 100%;
        outline: none;
        height: 1lh;
        white-space: nowrap;
      }
      [part=placeholder] {
        position: absolute;
        pointer-events: none;
        visibility: hidden;
        color: gray;
        [contenteditable]:empty + & {
          visibility: visible;
        }
      }
    }
  }
}

/* lib/uwc-input/types/checkbox.css */
@layer unstyled-web-components {
  uwc-input[type=checkbox] {
    vertical-align: text-bottom;
    [disabled] & {
      pointer-events: none;
    }
    & > [part=root] {
      width: 13px;
      height: 13px;
      margin: 3px 3px 3px 4px;
      border: 1px solid gray;
      border-radius: 2px;
      padding: 1px;
      box-sizing: border-box;
      display: flex;
      [disabled] & {
        background: var(--disabled-background);
      }
      [part=checkmark] {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        [checked] & {
          background: selectedItem;
        }
        [aria-checked=mixed] & {
          height: 20%;
          align-self: center;
        }
      }
    }
  }
}

/* lib/uwc-input/types/radio.css */
@layer unstyled-web-components {
  uwc-input[type=radio] {
    vertical-align: text-bottom;
    & > [part=root] {
      width: 13px;
      height: 13px;
      margin: 3px 3px 0px 5px;
      border: 1px solid gray;
      border-radius: 100%;
      padding: 1px;
      box-sizing: border-box;
      [part=checkmark] {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        [checked] & {
          background: selectedItem;
        }
      }
    }
  }
}

/* lib/uwc-input/types/date.css */
@layer unstyled-web-components {
  uwc-input[type=date] {
    > [part=root] {
      cursor: text;
      display: flex;
      border: 1px solid gray;
      border-radius: 2px;
      padding: 2px 3px;
      height: min-content;
      position: relative;
      font-family: Arial;
      font-size: 13.3333px;
    }
  }
}

/* lib/uwc-input/types/textarea.css */
@layer unstyled-web-components {
  uwc-input[type=textarea] {
    display: flex;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 2px 3px;
    height: min-content;
    min-height: 3lh;
    width: 172px;
    position: relative;
    font-family: Arial;
    font-size: 13.3333px;
    cursor: text;
    overflow: hidden;
    > [part=root] {
      [contenteditable] {
        height: 100%;
        width: 100%;
        outline: none;
      }
      [part=placeholder] {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        visibility: hidden;
        color: gray;
        [contenteditable]:empty + & {
          visibility: visible;
        }
      }
    }
  }
}

/* lib/uwc-input/types/range.css */
@layer unstyled-web-components {
  uwc-input[type=range] {
    display: flex;
    height: 1rem;
    > [part=root] {
      align-self: center;
      margin: 3px;
      [part=track] {
        height: 0.3lh;
        line-height: 1lh;
        overflow: hidden;
        border-radius: 0.5lh;
        border: 1px solid #b5b5b5;
        background: #f3f3f3;
        min-width: 125px;
        position: relative;
        [part=cover] {
          position: absolute;
          height: 100%;
          background-color: dodgerblue;
          pointer-events: none;
        }
      }
      .thumb {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 1rem;
        width: 1rem;
        border-radius: 100%;
        background-color: dodgerblue;
      }
    }
  }
}

/* lib/uwc-input/uwc-input.css */
@layer unstyled-web-components {
  uwc-input {
    anchor-name: var(--anchor-name);
    width: fit-content;
    display: inline-block;
    --disabled-background: light-dark( rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3) );
    & > [part=root] {
      position: relative;
      width: 100%;
      [disabled] & {
        opacity: 0.5;
      }
    }
    & > ul[part=values] {
      margin: 0;
      padding: 0;
      display: flex;
      & li {
        list-style-type: none;
        white-space: nowrap;
        &[part=value] {
          display: none;
        }
        uwc-input[multiple] & {
          background-color: hsl(from buttonface h s 85%);
          color: buttontext;
          margin-right: 0.5ch;
          padding-inline: 0.5em;
          @media (prefers-color-scheme: dark) {
            background-color: hsl(from buttonface h s 35%);
          }
        }
      }
    }
    & > dialog[popover] {
      z-index: 1;
      &[open] {
        display: initial;
        pointer-events: initial;
      }
      position-anchor: var(--anchor-name);
      position-area: bottom span-x-end;
      position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
      width: min-content;
      min-width: anchor-size(width);
      margin: 0;
      margin-top: 2px;
      padding: 0;
      border: 1px solid black;
      box-sizing: border-box;
      pointer-events: none;
      & > ul {
        padding: 0;
        margin: 0;
        & li {
          list-style-type: none;
          &[aria-selected=true] {
            background: blue;
            color: white;
          }
        }
      }
    }
    & > small.validation-message {
      display: none;
    }
  }
}

/* lib/uwc-datepicker/uwc-datepicker.css */
@layer unstyled-web-components {
  uwc-datepicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    & > ul[role=grid] {
      display: grid;
      padding: 0;
      width: fit-content;
      [view=day] & {
        grid-template-columns: repeat(8, 1fr);
      }
      [view=month] & {
        grid-template-columns: repeat(3, 1fr);
      }
      [view=year] & {
        grid-template-columns: repeat(3, 1fr);
      }
      li {
        list-style: none;
        height: auto;
        padding: 0.5rem;
        align-self: stretch;
        text-align: center;
        &:where(.previous-month, .next-month) {
          color: gray;
        }
        border: 1px dashed transparent;
        &:where(:not([data-value]), [aria-disabled=true]) {
          cursor: default;
          pointer-events: none;
          color: lightgray;
        }
        &.weekday {
          pointer-events: unset;
        }
        &[data-value] {
          cursor: pointer;
          &[aria-current=time] {
            background: highlight;
            color: highlightText;
          }
          &[aria-selected=true] {
            border-color: blue;
          }
        }
      }
    }
    [part=selection] {
      display: flex;
      width: 100%;
      [part=current] {
        flex: 1 1;
        white-space: nowrap;
      }
    }
  }
}

/* lib/uwc-table/uwc-table.css */
@layer unstyled-web-components {
  uwc-table {
    --border-color: grey;
    --padding-level-offset: 3px;
    display: grid;
    grid-auto-rows: min-content;
    overflow: auto;
    border: 1px solid var(--border-color);
    uwc-tr {
      --level: 1;
      display: grid;
      grid-template-columns: subgrid;
      grid-auto-flow: dense;
      grid-column: 1 / -1;
      background: inherit;
      &:not(.visible) {
        content-visibility: auto;
        uwc-th,
        uwc-td {
          display: none;
          &:first-child {
            display: initial;
            visibility: hidden;
          }
        }
      }
      &:has(uwc-th) {
        position: sticky;
        top: 0;
        z-index: 2;
      }
      uwc-tr :where(uwc-th, uwc-td)[style*="grid-column: 1"] {
        padding-left: calc(var(--padding-level-offset) * var(--level));
      }
      uwc-th,
      uwc-td {
        position: relative;
        padding: 3px;
        border-inline-end: 1px solid var(--border-color);
        border-block-end: 1px solid var(--border-color);
        background: inherit;
        &[hidden] {
          display: none;
        }
        &[pinned] {
          position: sticky;
          z-index: 1;
          &::after {
            display: none;
            pointer-events: none;
            content: "";
            position: absolute;
            top: 0;
            background:
              linear-gradient(
                to right,
                var(--border-color),
                transparent);
            width: 5px;
            height: 100%;
          }
          &[pinned=left] {
            &.last::after {
              display: initial;
              left: 100%;
              background:
                linear-gradient(
                  to right,
                  var(--border-color),
                  transparent);
            }
          }
          &[pinned=right] {
            &.first::after {
              display: initial;
              right: 100%;
              background:
                linear-gradient(
                  to left,
                  var(--border-color),
                  transparent);
            }
          }
        }
        .resize-handle {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          width: 4px;
          cursor: ew-resize;
        }
      }
      uwc-th {
        font-weight: bold;
        border-block-end-width: 2px;
        &.dragging {
          opacity: 0.5;
        }
      }
    }
  }
}

/* lib/uwc-playground/uwc-playground.css */
@layer unstyled-web-components {
  uwc-playground {
    display: flex;
    border: 1px solid gray;
    min-height: 150px;
    & > pre {
      flex: 1 0;
      margin: 0;
      padding: 1rem;
      code {
        display: inline-block;
        width: 100%;
        height: 100%;
        outline: none;
      }
    }
    & > [part=preview] {
      flex: 1 0;
      border: none;
      border-left: 1px solid gray;
      padding: 1rem;
    }
  }
}

/* lib/index.css */
/*# sourceMappingURL=index.css.map */