// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Select Multiple should render correctly 1`] = `
"<div class=\\"select  multiple \\"><input type=\\"search\\" role=\\"combobox\\" aria-haspopup=\\"listbox\\" readonly=\\"\\" unselectable=\\"on\\" aria-expanded=\\"false\\"><style>
          input {
            position: fixed;
            top: -10000px;
            left: -10000px;
            opacity: 0;
            z-index: -1;
            width: 0;
            height: 0;
            padding: 0;
            font-size: 0;
            border: none;
          }
        </style><span class=\\"value placeholder\\"><span><style>
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: var(--select-height);
          min-width: 0;
        }
      </style></span></span><div class=\\"item  mock \\"><style>
        .item {
          font-size: inherit;
          height: auto;
        }

        .justify {
          justify-content: undefined;
        }

        .direction {
          flex-direction: undefined;
        }

        .alignContent {
          align-content: undefined;
        }

        .alignItems {
          align-items: undefined;
        }

        .xs {
          flex-grow: 1;
          max-width: 100%;
          flex-basis: 0;
          display: inherit;
        }

        @media only screen and (max-width: 650px) {
          .xs {
            flex-grow: 1;
            max-width: 100%;
            flex-basis: 0;
            display: inherit;
          }
        }

        @media only screen and (min-width: 650px) {
          .sm {
            flex-grow: 1;
            max-width: 100%;
            flex-basis: 0;
            display: inherit;
          }
        }

        @media only screen and (min-width: 900px) {
          .md {
            flex-grow: 1;
            max-width: 100%;
            flex-basis: 0;
            display: inherit;
          }
        }

        @media only screen and (min-width: 1280px) {
          .lg {
            flex-grow: 1;
            max-width: 100%;
            flex-basis: 0;
            display: inherit;
          }
        }

        @media only screen and (min-width: 1920px) {
          .xl {
            flex-grow: 1;
            max-width: 100%;
            flex-basis: 0;
            display: inherit;
          }
        }
      </style></div><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
        svg {
          color: inherit;
          stroke: currentColor;
          transition: all 200ms ease;
          width: 1.214em;
          height: 1.214em;
        }
      </style></svg></div><style>
            .select {
              display: inline-flex;
              align-items: center;
              user-select: none;
              white-space: nowrap;
              position: relative;
              cursor: pointer;
              max-width: 90vw;
              overflow: hidden;
              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,
                box-shadow 200ms ease 0s;
              border: 1px solid #eaeaea;
              border-radius: 5px;

              background-color: #fff;
              --select-font-size: calc(0.875 * 16px);
              --select-height: calc(2.25 * 16px);
              min-width: 11.5em;
              width: initial;
              height: var(--select-height);
              padding: 0 calc(0.334 * 16px) 0
                calc(0.667 * 16px);
              margin: 0 0 0 0;
            }

            .multiple {
              height: auto;
              min-height: var(--select-height);
              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)
                calc(0.667 * 16px);
            }

            .select.active,
            .select:hover {
              border-color: #000;
            }

            .select.active.icon,
            .select:hover .icon {
              color: #000;
            }

            .value {
              display: inline-flex;
              flex: 1;
              height: 100%;
              align-items: center;
              line-height: 1;
              padding: 0;
              margin-right: 1.25em;
              font-size: var(--select-font-size);
              color: #000;
              width: calc(100% - 1.25em);
            }

            .value > :global(div),
            .value > :global(div:hover) {
              border-radius: 0;
              background-color: transparent;
              padding: 0;
              margin: 0;
              color: inherit;
            }

            .placeholder {
              color: #999;
            }

            .icon {
              position: absolute;
              right: 4pt;
              font-size: var(--select-font-size);
              top: 50%;
              bottom: 0;
              transform: translateY(-50%) rotate(0deg);
              pointer-events: none;
              transition: transform 200ms ease;
              display: flex;
              align-items: center;
              color: #666;
            }
          </style></div>"
`;
