/*
 * Modified by Justin Jäger for the Unfolded.Tools Remote Simulator.
 * Modified: 2026-08-03.
 * GNU GPL v3.0 only; see MODIFICATIONS.md.
 */
@use "../base/mixins";
@use "../vars/variables";

// ---------------------------------------------------------------------------
// Vendored structural subset of vue-select's base stylesheet.
//
// Source:  vue-select 4.0.0-beta.6 — dist/vue-select.css
//          https://github.com/sagalbot/vue-select
// License: MIT, Copyright (c) 2017 Jeff Sagal. MIT is GPL-v3 compatible,
//          which is what allows these rules to be vendored into this project.
//
// UCSelect and SetupSelection are native components now and the `vue-select`
// package is gone, but the app's dropdown styling (below, and in
// _setup-item.scss, _add-device.scss, _navbar.scss, ...) was written as a set
// of *overrides on top of* that stylesheet, so its structural rules are still
// load-bearing. They are reproduced here instead of imported.
//
// Rules are kept in upstream source order, because several of them resolve
// specificity ties against each other by order (e.g. `.vs--single .vs__selected`
// must stay after `.vs--disabled .vs__selected`). Values are copied verbatim,
// with `--vs-*` custom properties resolved to the upstream `:root` defaults —
// that `:root` block is not vendored. The one exception is
// `--vs-dropdown-max-height`, which the app itself sets in _variables.scss and
// which therefore stays a `var()` reference.
//
// This block must stay ahead of the app's own rules in this file: the upstream
// stylesheet was imported into App.vue via `@import`, which bundlers hoist to
// the top of the CSS bundle, so these rules have always lost every
// specificity tie against app rules.
//
// Deliberately NOT vendored (verified by diffing computed styles of the
// rendered select markup before/after this change):
//   - The `:root` custom-property block (values resolved inline instead).
//   - Rules for elements the native components never render: `.vs__spinner`,
//     `.vs__open-indicator`, `.vs__deselect`, `.vs--loading` states,
//     `.vs__dropdown-option--deselect`, and the whole `[dir=rtl]` block.
//   - `.vs--unsearchable .vs__search` rules — unsearchable mode no longer
//     renders a search input at all.
//   - `.vs__dropdown-option--highlight` — fully overridden by the app below.
//   - `.vs__fade-enter` — Vue 2 naming. Vue 3 emits `vs__fade-enter-from`, so
//     this rule never matched and dropdowns have no enter fade today. Adding
//     the Vue 3 name would be a behaviour change, so it is left out.
// ---------------------------------------------------------------------------

.v-select {
  position: relative;
  font-family: inherit;
}

// Load-bearing: `_button.scss` sets `box-sizing: content-box` on `button`,
// which outranks the `*` reset in `_base.scss`. This rule is what keeps the
// buttons inside a select (`.vs__clear`, `.button--toggle-tick`) border-box.
.v-select,
.v-select * {
  box-sizing: border-box;
}

.vs__fade-enter-active,
.vs__fade-leave-active {
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.vs__fade-leave-to {
  opacity: 0;
}

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected {
  cursor: not-allowed;
  background-color: rgb(248, 248, 248);
}

.vs__dropdown-toggle {
  appearance: none;
  display: flex;
  padding: 0 0 4px;
  background: none;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  white-space: normal;
}

.vs__selected-options {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0 2px;
  // Containing block for the absolutely positioned `.vs__search`.
  position: relative;
}

.vs__actions {
  display: flex;
  align-items: center;
  padding: 4px 6px 0 3px;
}

.vs--searchable .vs__dropdown-toggle {
  cursor: text;
}

.vs--unsearchable .vs__dropdown-toggle {
  cursor: pointer;
}

.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vs__clear {
  fill: rgba(60, 60, 60, 0.5);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 8px;
}

// Positions every dropdown that does not use `dynamicPosition`; the
// teleported ones are placed by useDropdownPosition instead.
.vs__dropdown-menu {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1000;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  // Set by the app in _variables.scss (600px), so it stays a var reference.
  max-height: var(--vs-dropdown-max-height);
  min-width: 160px;
  overflow-y: auto;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-top-style: none;
  border-radius: 0 0 4px 4px;
  text-align: left;
  list-style: none;
  background: #fff;
  color: inherit;
}

.vs__no-options {
  text-align: center;
}

.vs__dropdown-option {
  line-height: 1.42857143;
  display: block;
  padding: 3px 20px;
  clear: both;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.vs__dropdown-option--disabled {
  background: rgb(248, 248, 248);
  color: rgba(60, 60, 60, 0.5);
  cursor: not-allowed;
}

.vs__selected {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  color: #333;
  line-height: 1.4;
  margin: 4px 2px 0;
  padding: 0 0.25em;
  z-index: 0;
}

.vs--single .vs__selected {
  background-color: transparent;
  border-color: transparent;
}

// Searchable single mode: the selected label steps out of the flow and dims
// while the dropdown is open, and hides entirely once a query is typed.
// (_form.scss re-pins `position`/`opacity` at higher specificity; the
// `display: none` while searching is the part that stays live.)
.vs--single.vs--open .vs__selected {
  position: absolute;
  opacity: 0.4;
}

.vs--single.vs--searching .vs__selected {
  display: none;
}

// Suppresses the native WebKit affordances on `input[type="search"]` — the
// clear "x" that Chrome draws once the field has text, in particular.
//
// Keep this rule SEPARATE from the group below, exactly as upstream has it.
// `::-ms-clear` is not a selector Chrome knows, and a single unknown selector
// invalidates the whole selector list it appears in — merging these into one
// rule makes Chrome drop it and the native "x" comes back.
.vs__search::-webkit-search-cancel-button {
  display: none;
}

.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
  display: none;
}

.vs__search,
.vs__search:focus {
  color: inherit;
  appearance: none;
  line-height: 1.4;
  font-size: 1rem;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 4px 0 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
  z-index: 1;
}

.vs__search::placeholder {
  color: inherit;
}

// --- end of vendored vue-select rules ---------------------------------------

.vs__dropdown-menu {
  margin-top: 0.5rem;
  padding: 0.625rem;
  border-radius: 1rem;
  background: var(--uc-background);
  max-width: 94vw;
  width: max-content;
  z-index: var(--uc-vselect-z-index) !important;
  overflow-x: hidden;

  @include mixins.scrollbar-light;

  &::-moz-scrollbar-track {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  &::-webkit-scrollbar-track {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  i {
    display: inline-flex;
    justify-content: center;
    width: 1.25rem;
    margin-left: -0.25rem;
    margin-right: 1rem;
  }

  .button-add-freetext {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    text-transform: uppercase;

    &:focus,
    &:active {
      background: var(--uc-foreground);
    }

    @media (pointer: fine) {
      &:hover {
        background: var(--uc-foreground);
      }
    }
  }
}

.vs__dropdown-option {
  @include mixins.popupmenu-item;
  display: flex;
  align-items: center;
  min-height: 3rem;
  color: var(--uc-white);
  border-radius: 0.75rem;
  gap: 0.625rem;
  transition: all 0.15s;
  margin-top: 0.625rem;

  @media (pointer: fine) {
    &:hover {
      color: var(--uc-theme-color-10);
      background: var(--uc-white);
      transition: all 0.15s;
    }
  }

  &--highlight {
    color: var(--uc-theme-color-10);
    background: var(--uc-white);
    transition: all 0.15s;
  }

  &--selected {
    &::after {
      display: inline-block;
      font-family: var(--uc-font-family-icons) !important;
        font-feature-settings: "liga";
      font-size: 1.125rem;
      font-weight: 300;
      content: "check_circle";
      margin-left: auto;
      margin-right: 0;
    }
  }

  &--disabled {
    @include mixins.popupmenu-item;
    background: transparent;
    opacity: 0.6;
  }

  & > span.label {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.25rem;
    overflow: hidden;
  }
}

.v-select {
  max-width: 100%;

  .vs__dropdown-toggle {
    @include mixins.body-large;
    display: inline-flex;
    padding: 0.575rem 1.25rem 0.525rem;
    min-height: 2.625rem;
    align-items: center;
    gap: 0.625rem;
    border: 0;
    border-radius: 3.75rem;
    color: var(--uc-text-text-primary);
    cursor: pointer;
    width: 100%;
    min-width: 6rem;
    transition: all 0.15s;

    @media (pointer: fine) {
      &:hover {
        background: var(--uc-foreground);
        color: var(--uc-black);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        .vs__selected {
          color: var(--uc-black);
        }
      }
    }
  }

  .vs__selected-options {
    min-height: 1.125rem;
    max-width: calc(100% - 1rem);
  }

  .vs__selected {
    @include mixins.body-large;
    line-height: 1.1875;
    margin: 0;
    padding: 0;
    color: var(--uc-white);
    overflow: hidden;
  }

  .vs__actions {
    padding: 0;

    &::after {
      display: flex;
      font-family: var(--uc-font-family-icons) !important;
        font-feature-settings: "liga";
      font-weight: 400;
      width: 1rem;
      height: 0.5rem;
      content: "keyboard_arrow_down";
      font-size: 1rem;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transform-origin: center;
      transition: all 0.2s ease;
    }
  }

  &.vs--open {
    position: relative;

    .vs__dropdown-toggle {
      position: relative;
      background: var(--uc-white);
      z-index: var(--uc-vselect-z-index);
      transition: all 0.15s;
    }

    .vs__selected {
      color: var(--uc-black);
    }

    .vs__actions {
      &::after {
        color: var(--uc-black);
        transform: rotate(180deg);
      }
    }
  }

  .vs__dropdown-option {
    min-width: 12.5rem;
  }

  &__custom-background {
    position: fixed;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--uc-vselect-z-index);
  }

  &--on-center-list {
    display: flex;
    justify-content: center;

    .vs__dropdown-menu {
      left: auto;
      right: auto;
      margin-left: auto;
      margin-right: auto;
    }
  }

  &--on-right-list {
    .vs__dropdown-menu {
      left: auto;
      right: 0;
      margin-left: auto;
      margin-right: 0;
    }
  }

  &--light {
    .vs__dropdown-toggle {
      background: transparent;
      border: 1px solid var(--uc-buttons-tertiary-button-tertiary-bg);
      transition: all 0.15s;
    }
  }

  &--dark {
    .vs__dropdown-toggle {
      background: rgba(0, 0, 0, 0.5);

      @media (pointer: fine) {
        &:hover {
          color: var(--uc-black);
          background: var(--uc-white);
        }
      }
    }
  }

  &--compact {
    .vs__dropdown-toggle {
      background: var(--uc-buttons-secondary-button-secondary-bg);
      min-width: 1rem;
      min-height: 1rem;
      padding: 0.1875rem 0.5rem;

      .vs__actions {
        display: none;
      }

      .vs__selected {
        @include mixins.body-extrasmall;
        border: 0;

        &::before {
          font-family: var(--uc-font-family-icons);
        font-feature-settings: "liga";
          font-weight: 300;
          font-size: 0.625rem;
          content: "check";
          margin-right: 0.375rem;
        }
      }
    }
  }

  .vs__search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 1.125rem;
    padding: 0 0 0 0.125rem;
    margin-top: 0;
    background-color: transparent;
    border: 0;

    &:focus {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  &.vs--searchable {
    .vs__dropdown-toggle {
      min-width: 12rem;
    }

    .vs__dropdown-menu {
      @media screen and (min-width: variables.$bp-phone-plus) {
        min-width: 23.25rem;
      }
    }
  }

  &.vs--multiple {
    .vs__selected-options {
      display: block;
      max-height: 1.3125rem;
      padding-left: 1rem;
      white-space: nowrap;
      overflow: hidden;
      padding: 0;
    }

    .vs__selected {
      display: inline-block;
      background-color: transparent;
      padding: 0.125rem 0.4rem 0.125rem 0.15rem;
      line-height: 1rem;
      border: 0;
      margin: 0;

      &::after {
        content: ",";
      }

      // The last selected label carries no comma. Multiple mode is always
      // unsearchable and no longer renders a trailing search input, so the
      // last label is now the last child of .vs__selected-options.
      &:last-child {
        &::after {
          display: none;
        }
      }
    }

    .vs__dropdown-option {
      & > span {
        display: flex;
        width: 100%;
        gap: 0.625rem;
        align-items: center;
        justify-content: flex-start;
      }

      &--selected {
        background: transparent;
        color: var(--uc-white);

        &::after {
          display: none;
        }

        @media (pointer: fine) {
          &:hover {
            color: var(--uc-theme-color-10);
            background: var(--uc-white);
            transition: all 0.15s;

            .form-item--checkbox-tick input:checked + label {
              border-color: var(--uc-black);
            }
          }
        }
      }
    }
  }

  &.vs--disabled {
    pointer-events: none;
    cursor: default;
  }

  &__no-options {
    display: block;
    padding: 0 1rem;
    color: var(--uc-theme-color-70);
  }

  .vs__fade-enter-active,
  .vs__fade-leave-active {
    transform-origin: top center;
    transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
  }

  .vs__fade-enter-to,
  .vs__fade-leave-from {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform-origin: top center;
    opacity: 1;
  }

  .vs__fade-enter-from,
  .vs__fade-leave-to {
    transform: scale(1, 0);
    -webkit-transform: scale(1, 0);
    transform-origin: top center;
    opacity: 0;
  }
}

.dynamic-dropdown {
  max-width: 50vw;
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top;
  transition:
    opacity 400ms ease,
    transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);

  &.drop-up {
    transform-origin: bottom;
  }

  &.animate-dropdown {
    opacity: 1;
    transform: translateY(0);
  }

  @media screen and (max-width: variables.$bp-tablet) {
    max-width: 60vw;
  }

  @media screen and (max-width: variables.$bp-phone) {
    max-width: 90vw;
  }
}

@keyframes drop-up-height {
  from {
    max-height: 0;
  }

  to {
    max-height: 600px;
  }
}

@keyframes drop-up-opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}