@import "tom-select/dist/css/tom-select.css";

/* =========================================================
   WRAPPER / INPUT (SE QUEDA DENTRO DE .tom-select)
========================================================= */
.tom-select {
  &.ts-wrapper,
  &.plugin-dropdown_input.focus.dropdown-active {
    border-width: 1px;
    border-style: solid;
    box-shadow: theme("boxShadow.sm");
    border-radius: theme("borderRadius.DEFAULT");
    position: relative;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 18px;
    background-position: center right 0.6rem;
    background-repeat: no-repeat;

    .ts-control {
      border: 0;
      display: flex;
      outline: none;
      min-height: 36px;
      align-items: center;
      background-color: transparent;
      font-size: inherit;
      padding: theme("spacing.2") theme("spacing.3");

      input {
        font-size: inherit;
      }
    }
  }

  &.ts-wrapper.disabled {
    background-color: theme("colors.slate.100");
  }

  &.ts-wrapper.single.input-active .ts-control {
    background-color: transparent;
  }

  &.ts-wrapper.multi {
    &.has-items .ts-control {
      column-gap: theme("spacing.[2.5]");
      row-gap: theme("spacing.1");
      padding: theme("spacing.1") theme("spacing.[2.5]");
    }

    .ts-control > div {
      padding: 0 theme("spacing.2");
      margin: 0 0 0 calc(theme("spacing.[1.5]") * -1);
      border-radius: theme("borderRadius.DEFAULT");
      background-color: theme("colors.slate.200");
    }
  }

  &.ts-wrapper.plugin-remove_button .item .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: theme("colors.slate.300");
    padding: theme("spacing.1") theme("spacing.2");
  }

  &.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    margin-left: theme("spacing.2");
  }

  &.plugin-dropdown_input.focus.dropdown-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }

  &.plugin-dropdown_input .dropdown-input-wrap .dropdown-input {
    outline: none;
  }
}

/* =========================================================
   DROPDOWN (GLOBAL – YA NO ES HIJO DE .tom-select)
========================================================= */
.ts-dropdown {
  z-index: 3000 !important;
  margin-top: 4px;
  font-size: inherit;
  pointer-events: auto;
  position: absolute !important;
  top: 100%;
  left: 0;
  right: 0;

  box-shadow: theme("boxShadow.sm");
  border-radius: theme("borderRadius.DEFAULT");
  border: 1px solid theme("colors.slate.200");
  background-color: white;

  .dropdown-input-wrap {
    padding: theme("spacing.2");

    .dropdown-input {
      border-radius: theme("borderRadius.DEFAULT");
      border: 1px solid theme("colors.slate.200");
    }
  }

  .optgroup-header {
    padding: theme("spacing.[2.5]") theme("spacing.3");
    font-weight: theme("fontWeight.medium");
    background-color: theme("colors.slate.100");
  }

  .option {
    padding: theme("spacing.[2.5]") theme("spacing.3");

    &[data-selectable] {
      &.active:not(.selected),
      &:hover:not(.selected) {
        background-color: theme("colors.slate.100");
        color: inherit;
      }
    }
  }

  .selected {
    color: white;
    background-color: theme("colors.primary");
  }

  [data-selectable] .highlight {
    color: white;
    background-color: theme("colors.danger");
  }
}

/* =========================================================
   DARK MODE
========================================================= */
.dark {
  .tom-select {
    &.ts-wrapper,
    &.plugin-dropdown_input.focus.dropdown-active {
      background-color: transparent;

      .ts-control {
        color: theme("colors.slate.300");
      }
    }

    &.ts-wrapper.disabled {
      border-color: transparent;
      background-color: transparent;
    }

    &.ts-wrapper.multi {
      .ts-control > div {
        color: theme("colors.slate.300");
        background-color: theme("colors.darkmode.300");
      }
    }

    &.ts-wrapper.plugin-remove_button .item .remove {
      border-color: theme("colors.darkmode.400");
    }

    &.plugin-dropdown_input.focus.dropdown-active {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
  }

  .ts-wrapper {
    border-color: #48495B;
    background-color: theme("colors.darkmode.800");

    &:hover {
      border-color: #797A8A;
    }
  }

  .ts-dropdown {
    color: theme("colors.slate.300");
    border-color: theme("colors.darkmode.800");
    background-color: theme("colors.darkmode.700");
    pointer-events: auto;

    .dropdown-input-wrap {
      .dropdown-input {
        border-color: theme("colors.darkmode.800");
        background-color: theme("colors.darkmode.600");
      }
    }

    .optgroup-header {
      color: theme("colors.slate.300");
      background-color: theme("colors.darkmode.800");
    }

    .option {
      &[data-selectable] {
        &.active:not(.selected),
        &:hover:not(.selected) {
          background-color: theme("colors.darkmode.600");
        }
      }
    }
  }
}