.users-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  turbo-frame {
    display: inherit;
    flex-direction: inherit;
    gap: inherit;
  }

  .cards-container { /* Includes available, admin & selected */
    max-height: unset;
    overflow: unset;
  }

  &:has(.selected-users-container .card__user--selected) { /* Used with JS, hide scroll to link if no cards are selected */
    #user_selector_counter_wrapper {
      justify-content: space-between;
    }

    #scroll_to_link {
      display: inline-flex !important;
    }
  }

  .cards-container#available-users { /* Only available users*/
    .cards-wrapper {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

      .card-wrapper.user-card-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & > turbo-frame {
          display: inherit;
          flex: 1;
          flex-direction: inherit;
          gap: inherit;
        }

        .card.card--user {
          min-width: 280px;
        }

        &.selected {
          .card.card--user {
            border: 2px solid var(--theme-color-darker);
            padding: calc(0.5rem - 2px) calc(1rem - 2px);
          }
        }
      }
    }
  }

  .selected-users-container {
    .heading-wrapper#user-selector-header {
      width: 100%;
    }

    #users_selector_query_notice.page-notice {
      width: 100%;

      .heading-wrapper {
        justify-content: flex-start;
      }
    }

    #selected-users-action-bar:has(#users_selector_query_link:not(.hidden)) {
      justify-content: space-between;
    }

    .cards-wrapper {
      grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr));
    }
  }
}

.admin-permissions-attribute {
  tooltip {
    max-inline-size: 9.75rem; /* Fits 4 icon tags */
    padding: var(--_padding-horizontal) 0.5rem;
  }
}

.card.card__user.card__user--selected {
  align-items: center;
  gap: 0.5rem;
  min-width: unset;
  box-shadow: unset;
  background-color: unset;
  border: none;

  header.card-header {
    width: fit-content;
    align-items: center;

    .deselect-action-wrapper {
      position: relative;
      width: fit-content;
      margin-top: 0.5rem;

      .btn#deselectUserBtn {
        border-radius: 50%;
        padding: 0.25rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -25%);

        svg {
          min-width: 0.75rem;
          width: 0.75rem;
        }
      }
    }
  }
}