.UserListPage {
  // Pad bottom of page to make nav area look less squashed
  padding-bottom: 24px;
  overflow-x: auto;

  &-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    column-gap: 8px;
  }

  &-totalUsers {
    margin: 0;
  }

  &-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    * + * {
      margin-left: 8px;
    }
  }

  &-grid {
    width: 100%;
    position: relative;
    border-radius: var(--border-radius);

    // Use CSS custom properties to define the number of columns in the grid
    grid-template-columns: repeat(var(--columns), max-content);

    // Ensure mobile scrollbar isn't on top of content
    padding-bottom: 4px;

    // Table refreshing overlay
    &--loadingPage {
      .loading-container();
    }

    &--loaded,
    &--loadingPage {
      display: grid;
    }

    &-header {
      font-weight: bold;
      border-bottom: 1px solid var(--muted-more-color);
      padding: 8px 16px;
      background: var(--control-bg);
    }

    &-rowItem {
      padding: 4px 16px;
      display: flex;
      align-items: center;

      &[data-column-name="userActions"] {
        padding: 0;
        position: relative;
      }

      &--shaded {
        background: var(--body-bg-shaded);

        [data-theme^=dark] & {
          background: var(--body-bg-light);
        }
      }
    }
  }
}

// Handles styling of default UserList columns
.UserList {
  &-joinDate {
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
  }

  &-userActions {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-userActionsBtn {
    width: 100%;
    height: 100%;

    border-radius: 0;
    padding: 0;
  }

  &-email {
    display: flex;
    flex-grow: 1;

    &[data-email-shown="false"] {
      .UserList-emailAddress {
        user-select: none;
        filter: blur(4px);
        cursor: pointer;
      }
    }

    &Address {
      flex-grow: 1;
      margin-right: 4px;
      transition: filter 0.2s ease-out;
    }

    &IconBtn {
      margin-left: 12px;

      &:hover {
        text-decoration: none;
      }
    }
  }
}