@import url("./types/file.css") layer(unstyled-web-components);
@import url("./types/text.css") layer(unstyled-web-components);
@import url("./types/number.css") layer(unstyled-web-components);
@import url("./types/checkbox.css") layer(unstyled-web-components);
@import url("./types/radio.css") layer(unstyled-web-components);
@import url("./types/date.css") layer(unstyled-web-components);
@import url("./types/textarea.css") layer(unstyled-web-components);
@import url("./types/range.css") layer(unstyled-web-components);

@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;
    }
  }
}