// Has dark mode adjustments, see dark-mode/misc.scss

.slimselect {
  --ss-primary-color: var(--color-interaction);
  --ss-bg-color: var(--color-bg-light);
  --ss-font-color: var(--color-text);
  --ss-font-placeholder-color: var(--color-text-muted--opacity);
  --ss-disabled-color: var(--color-bg-slight-contrast);
  --ss-border-color: var(--color-interaction);

  // --ss-highlight-color: ;
  --ss-success-color: var(--color-success);
  --ss-error-color: var(--color-danger);
  --ss-focus-color: var(--color-info);
  --ss-main-height: 2.5rem; // adjust to standard select height

  // --ss-content-height: ;
  --ss-spacing-l: 0.5em; // ! used in removal button
  --ss-spacing-m: 0.5em;
  --ss-spacing-s: 0.25em;
  --ss-animation-timing: 0.2s;
  --ss-border-radius: var(--button-border-radius);
}

.ss-content {
  .ss-search {
    input {
      &:focus {
          border-color: var(--color-info);
          box-shadow: 0 3px 2px 0 var(--ss-focus-color);
      }
    }
  }
}

.ss-main {
  width: 18rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border: 1px solid var(--color-divider-dark);
  border-radius: 0;

  &:focus {
    border-color: var(--color-info);
    box-shadow: 0 3px 2px 0 var(--ss-focus-color);
  }

  .ss-arrow {
    margin: var(--ss-spacing-s) var(--ss-spacing-m) auto var(--ss-spacing-m); // align top
    padding-right: 2rem;
    background: var(--color-bg-light) var(--image-chevron) no-repeat;
    background-position: 0.5em;
    background-size: 1em;
    path {
      visibility: hidden;
    }
  }
  .ss-values {
    // height: 1.3rem;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .ss-placeholder {
      padding: 0;
    }
    .ss-value {
      .ss-value-text {
        font-size: var(--font-size-s);
      }
      .ss-value-delete {
        border-left-width: 0;
      }
    }
  }
}

select[multiple].slimselect:not([data-once]) {
  height: 2.48rem;
  optgroup, option {
    visibility: hidden;
  }
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall {
  span {
    font-size: var(--font-size-s);
  }

  svg {
    width: 1em;
    height: 1em;
  }
}

