.ss-content {
  /* Outside HTML body */
  text-transform: capitalize;
}

.ss-main {
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--light-gray) !important;
  color: var(--ink) !important;
  display: flex !important;
  font-size: 0.875rem !important;
  min-height: 2rem !important;
  padding: calc(0.25rem - 1px) calc(1rem - 1px) !important;

  /* Use global dropdown arrow instead of SlimSelect arrow */
  .ss-arrow {
    display: none !important;
  }

  &.slim__select--error {
    border: 1px solid var(--danger-dark) !important;
  }

  &:after {
    content: url("/assets/icons/down-c2a5f89a.svg");
    max-height: 0.75rem;
    max-width: 0.75rem;
    min-width: 0.75rem;
    line-height: 0.75rem;
    position: relative;
    align-self: center;
    transition: 0.2s ease-in-out;
  }


  .ss-values {
    .ss-single {
      margin: auto 0 auto !important;

      &.truncate {
        display: -webkit-box;
      }
    }
  }

  &.ss-open-below:after {
    /* Rotate arrow when open */
    transform: rotate(180deg);
  }

  &:has(.ss-single) {
    height: 2rem !important;
  }

  .ss-single,
  .ss-values {
    /* Both single & multi select inputs */
    align-items: center;

    span.placeholder {
      background: unset !important;

      &::after {
        animation: unset !important;
      }
    }
  }

  .ss-values .ss-value {
    /* Multi Select Inputs */
    height: 1.5rem !important;
  }
}

.dropdown-absolute {
  .ss-values {
    .ss-single {
      position: absolute;
    }
  }
}

.ss-content {
  border: 1px solid var(--light-gray) !important;
  font-size: 0.875rem !important;
  overflow: hidden !important;
  z-index: 101 !important;
  /* Needed to show in modal */
}

.field-sm {
  .ss-main {
    min-height: 1.5rem !important;
    max-height: 1.5rem !important;

    &:has(.ss-single) {
      height: 1.5rem !important;
    }
  }
}

.ss-single {
  font-size: 0.875rem !important;
}

.ss-value-delete {
  font-weight: 600;
  text-align: center;
  width: 1rem !important;
  border-left: solid 1px var(--pure-white) !important;
}

.assignment-dropdown {
  --color: var(--pure-white);
  --assignment-dropdown-text-color: var(--ink);

  .ss-main {
    background-color: color-mix(in srgb, var(--color), white 85%) !important;
    border: 1px solid color-mix(in srgb, var(--assignment-dropdown-text-color), white 80%) !important;

    .ss-values {
      color: var(--assignment-dropdown-text-color) !important;
      text-transform: capitalize !important;
      justify-content: flex-start !important;
    }
  }

  &.assignment-dropdown--center {
    .ss-main {
      .ss-values {
        justify-content: center !important;
      }
    }
  }

  &.assignment-dropdown--none {
    --color: var(--mid-gray);
    --assignment-dropdown-text-color: var(--ink-gray);
  }

  /* Organisation Membership Permission Dropdowns */
  &.assignment-dropdown--admin {
    --color: var(--admin-color);
    --assignment-dropdown-text-color: var(--admin-color);
  }

  &.assignment-dropdown--creator {
    --color: var(--creator-color);
    --assignment-dropdown-text-color: var(--creator-color);
  }

  &.assignment-dropdown--publisher {
    --color: var(--publisher-color);
    --assignment-dropdown-text-color: var(--publisher-color);
  }
}