@import url("https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css")
layer(framework);

@layer theme {
  .country-select {
    --color-white: var(--surface);
    --color-neutral-100: var(--surface-highlight);
    --color-neutral-300: var(--surface-highlight);
    --color-neutral-500: var(--color-text);
    --color-neutral-600: var(--color-text);
    --color-neutral-900: var(--color-text);
  }

  .ts-dropdown {
    color: inherit;
    background-color: var(--surface);
  }
}

@layer undo {
  select[data-controller="select"] {
    visibility: hidden !important;
  }
  .dropdown-input {
    width: 100%;
    border-color: var(--color-neutral-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &::placeholder {
      color: var(--color-neutral-500);
    }
  }
  .plugin-dropdown_input.focus.dropdown-active .ts-control {
    --tw-border-style: none;
    border-style: none;
  }
  .ts-dropdown-content {
    padding-block: calc(var(--spacing) * 1.5);
    max-height: 240px;
    scroll-behavior: auto;
  }
  .ts-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: #a2a2a270 #7878780b;
  }
  .ts-dropdown-content::-webkit-scrollbar {
    width: 6px;
  }
  .ts-dropdown-content::-webkit-scrollbar-track {
    background: #78787879;
  }
  .ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #a2a2a270;
    border-radius: 3px;
  }
  .ts-control {
    display: flex;
    min-height: 40px;
    width: 100%;
    cursor: default;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-neutral-900);
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-neutral-300);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    --tw-ring-inset: inset;
    &::placeholder {
      color: var(--color-neutral-500);
    }
    &:focus {
      --tw-ring-color: var(--color-neutral-600);
    }
    &[disabled] {
      cursor: not-allowed;
      background-color: var(--color-neutral-100);
    }
    &.error {
      border-color: var(--color-red-400);
      outline-color: var(--color-red-300);
      &:focus {
        outline-color: var(--color-red-500);
      }
    }
  }
  .plugin-dropdown_input .dropdown-input {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .plugin-dropdown_input .items-placeholder {
    display: block;
  }
  .plugin-dropdown_input.has-items .items-placeholder {
    display: none;
  }
  .plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
    display: block;
  }
  .ts-dropdown .active.create {
    cursor: pointer;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
  }
  .loading-more-results {
    cursor: default;
  }
  .disabled .ts-control {
    cursor: not-allowed;
  }
  @media (min-width: 640px) {
    .ts-control {
      font-size: 0.875rem;
    }
  }
  .full .ts-control {
  }
  .ts-wrapper.single .ts-control,
  .ts-wrapper.single .ts-control input,
  .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    cursor: text;
  }
  .ts-dropdown [data-selectable] .highlight {
    background-color: color-mix(
      in srgb,
      oklch(70.5% 0.213 47.604) 20%,
      transparent
    );
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(
        in oklab,
        var(--color-orange-500) 20%,
        transparent
      );
    }
  }
  .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    background-color: var(--color-white);
  }
  .input-active {
    border-radius: var(--radius-lg);
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-neutral-600);
    --tw-ring-inset: inset;
  }
  .ts-wrapper {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
  }
  .ts-control,
  .ts-wrapper.single.input-active .ts-control {
    background-color: transparent;
  }
  .ts-control input {
    margin: calc(var(--spacing) * 0);
    background-color: var(--color-white);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    &::placeholder {
      color: var(--color-neutral-500);
    }
    &:read-only {
      cursor: pointer;
    }
  }
  @media (min-width: 640px) {
    .ts-control input {
      font-size: 0.875rem;
    }
  }
  .ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single
    .ts-control {
    padding-right: calc(var(--spacing) * 8);
  }
  .ts-wrapper.plugin-remove_button .item {
    border-radius: var(--radius-md);
  }
  .ts-wrapper.plugin-remove_button .item .remove {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    line-height: 1;
  }
  .ts-wrapper.plugin-remove_button .item .remove::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23737373'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    display: block;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    background-position: center;
    background-repeat: no-repeat;
  }
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23991B1B'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  .dark
    .ts-wrapper.plugin-remove_button
    .item[data-flag="true"]
    .remove::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23FCA5A5'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  .dark {
    .ts-wrapper.plugin-remove_button .item .remove::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23A1A1A1'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }
  }
  .ts-wrapper.plugin-remove_button .item .remove {
    font-size: 0;
    margin-block: calc(var(--spacing) * 0.5);
    margin-right: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 0.5);
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 1);
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-neutral-500);
  }
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
    color: var(--color-red-700);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-900);
      }
    }
  }
  .ts-wrapper.plugin-remove_button .item .flag-toggle {
    color: var(--color-neutral-400);
  }
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-red-800);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .ts-dropdown {
    z-index: 40;
    margin: calc(var(--spacing) * 0);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    --tw-border-style: solid;
    border-style: solid;
    border-color: var(--color-neutral-300);
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ts-dropdown .create {
    margin-inline: calc(var(--spacing) * 1.5);
    cursor: default;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .ts-dropdown [data-selectable].option,
  .ts-dropdown .no-results {
    margin-inline: calc(var(--spacing) * 1.5);
    cursor: default;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .ts-dropdown .option,
  .ts-dropdown [data-disabled],
  .ts-dropdown [data-disabled] [data-selectable].option {
    margin-inline: calc(var(--spacing) * 1.5);
    cursor: not-allowed;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .ts-dropdown [data-selectable].option,
  .ts-dropdown .ts-dropdown .create {
    cursor: pointer;
  }
  .ts-dropdown .active {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
  }
  .ts-dropdown .spinner {
    height: auto;
    width: auto;
  }
  .ts-dropdown .spinner:after {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 0);
    display: inline-block;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding: calc(var(--spacing) * 0);
  }
  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    print-color-adjust: exact;
  }
  .dark {
    .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }
  }
  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.6rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    print-color-adjust: exact;
    padding-right: 2rem;
  }
  .dark {
    .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
    }
  }
  .ts-wrapper.multi .ts-control > div {
    margin-right: calc(var(--spacing) * 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-neutral-100);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-900);
  }
  .ts-wrapper.multi.has-items .ts-control {
    padding-top: 7px;
    padding-right: calc(var(--spacing) * 8);
    padding-bottom: 4px;
  }
  .ts-wrapper.plugin-remove_button:not(.rtl) .item {
    cursor: grab;
  }
  .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    margin-left: calc(var(--spacing) * -0.5);
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
  }
  .ts-wrapper.plugin-remove_button .item .remove {
    margin-block: calc(var(--spacing) * 0.5);
    margin-right: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 0.5);
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 0px;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: color-mix(in srgb, oklch(20.5% 0 0) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-neutral-900) 60%, transparent);
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-neutral-900);
      }
    }
  }
  .ts-dropdown .optgroup-header {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-neutral-300);
    background-color: var(--color-white);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
  }
  .ts-dropdown.plugin-optgroup_columns .optgroup {
    height: fit-content;
    margin-top: calc(var(--spacing) * 0);
  }
  .optgroup {
    margin-top: calc(var(--spacing) * 1.5);
    &:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .dark .ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #525252;
  }
  .ts-wrapper.multi.has-items .ts-control > input {
    margin-bottom: 3px;
  }
  .tomselect-checkbox {
    margin-right: calc(var(--spacing) * 0);
  }
  .input-hidden.focus {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300);
  }
  select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control,
  select[data-select-disable-typing-value="true"]
    + .ts-wrapper.single
    .ts-control,
  select[data-select-disable-typing-value="true"]
    + .ts-wrapper.single
    .ts-control
    input,
  select[data-select-disable-typing-value="true"]
    + .ts-wrapper.single.input-active
    .ts-control {
    cursor: default;
  }
  .ts-dropdown-content.is-loading-more .option {
    pointer-events: none;
  }
  .ts-count-display {
    pointer-events: none;
    margin-block: calc(var(--spacing) * 0.5);
    margin-right: auto;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    display: none;
  }
  .ts-control:not(.count-active) .ts-count-display {
    display: none;
  }
  .ts-control.count-active .item {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }
  .ts-control.count-active input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
  }
  .ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
    padding-block: 5px;
  }
  .ts-control.external-tags-active .item {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }
  .ts-wrapper.multi.has-items .ts-control.external-tags-active {
    padding-block: calc(var(--spacing) * 2);
  }
  .plugin-dropdown_input.has-items
    .ts-control.external-tags-active
    .items-placeholder {
    display: block;
  }
  .ts-wrapper.multi.has-items .ts-control.external-tags-active > input {
    margin: 0;
  }
}