@truedat/auth 8.14.0 → 8.14.2

package/src/styles/Groups.less

@@ -0,0 +1,1009 @@
+.groups-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+  .group-create-button.ui.button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.65rem;
+    .group-create-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.15rem;
+      flex-shrink: 0;
+      > .icon {
+        margin: 0;
+      }
+      > svg {
+        width: 0.85em;
+        height: 0.85em;
+      }
+    }
+  }
+}
+.groups-card-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: 1.75em 1rem;
+  margin: 0;
+  padding-block: 0.875em;
+
+  > .td-group-card {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    margin: 0;
+  }
+}
+@media (min-width: 1600px) {
+  .groups-card-list {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+.td-group-card {
+  --card-accent-color: var(--td-card-accent, #002057);
+  --card-secondary-color: var(--td-card-secondary, #ed5c17);
+  --gc-action-tint: rgba(100, 116, 139, 0.07);
+  position: relative;
+  height: auto;
+  min-height: 160px;
+  overflow: hidden;
+  min-width: 0;
+  background: #fff;
+  border: 1px solid #edf2f7;
+  border-radius: 1.25rem 0.5rem 1.5rem 0.25rem;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
+  color: #334155;
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-left: 8px solid var(--card-accent-color);
+    border-radius: inherit;
+    opacity: 0;
+    transform: translateX(-8px);
+    transition:
+      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    pointer-events: none;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(270deg, var(--gc-action-tint), transparent 75%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 180ms ease;
+  }
+  &:has(.gc-actions a:hover),
+  &:has(.gc-actions a:focus-visible) {
+    --gc-action-tint: rgba(37, 99, 235, 0.09);
+    border-color: rgba(37, 99, 235, 0.7);
+  }
+  &:hover,
+  &:focus-within {
+    transform: translateY(-4px);
+    border-color: var(--card-accent-color);
+    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18);
+    &::after {
+      opacity: 1;
+    }
+    .gc-avatar {
+      background: var(--card-secondary-color);
+      color: #fff;
+      box-shadow: -0.3rem 0.2rem 0 var(--card-accent-color);
+      transform: translate(0.3rem, -0.2rem);
+    }
+    .gc-content h3 {
+      color: var(--card-secondary-color);
+      transform: translate(0.3rem, -0.2rem);
+    }
+    &::before {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    .gc-actions {
+      opacity: 1;
+      transform: translateX(0);
+      pointer-events: auto;
+      transition-delay: 0ms;
+    }
+  }
+  .gc-content {
+    display: grid;
+    grid-template-columns: 2.75rem minmax(0, 1fr);
+    align-content: start;
+    align-items: center;
+    column-gap: 0.75rem;
+    row-gap: 0.3rem;
+    min-height: inherit;
+    padding: calc(1.45em - 0.28rem) 2rem 2.25rem calc(1em + 0.35rem);
+    border-radius: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    h3 {
+      margin: 0;
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      font-size: 18px;
+      font-weight: 800;
+      line-height: 1.25;
+      color: #1e293b;
+      transition:
+        color 300ms cubic-bezier(0.22, 1, 0.36, 1),
+        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    h3,
+    .gc-name,
+    .gc-description {
+      max-width: 100%;
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--card-accent-color);
+      outline-offset: -3px;
+    }
+  }
+  .gc-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    grid-column: 1;
+    grid-row: 1;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.08);
+    font-size: 1.5rem;
+    color: var(--card-accent-color);
+    transition:
+      background 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      color 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    > .icon {
+      margin: 0;
+    }
+  }
+  .gc-name,
+  .gc-description {
+    grid-column: 1 / -1;
+    padding-left: 0.5rem;
+  }
+  .gc-name {
+    font-size: 0.85rem;
+    color: #64748b;
+  }
+  .gc-description {
+    margin: 0.75rem 0 0;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e2e8f0;
+    font-size: 13px;
+    line-height: 1.2;
+    color: #64748b;
+  }
+  .gc-actions {
+    z-index: 1;
+    position: absolute;
+    top: 0.45rem;
+    right: -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.25rem;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(0.45rem);
+    transition:
+      opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms,
+      transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
+    a {
+      display: flex;
+      align-items: center;
+      width: auto;
+      max-width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      border: 1px solid #64748b;
+      border-right: 0;
+      border-radius: 0.5rem 0 0 0.5rem;
+      background: #fff;
+      color: #64748b;
+      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
+      cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      transition:
+        max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+        padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
+        color 140ms ease,
+        background-color 140ms ease,
+        border-color 140ms ease;
+      i.icon {
+        flex: 0 0 1.75rem;
+        width: 1.75rem;
+        margin: 0;
+        font-size: 0.8rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        line-height: 1;
+      }
+      &:hover,
+      &:focus-visible {
+        max-width: 14rem;
+        padding: 0 1rem 0 0.08rem;
+        color: #1d4ed8;
+        background: #e8f1ff;
+        border-color: rgba(37, 99, 235, 0.62);
+        .gc-action-label {
+          max-width: 11rem;
+          opacity: 1;
+        }
+      }
+      &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: -2px;
+      }
+    }
+  }
+  .gc-action-label {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    font-size: 0.8rem;
+    font-weight: 800;
+    line-height: 1;
+    transition:
+      max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 420ms ease;
+  }
+  .gc-count {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    min-width: 3.8rem;
+    min-height: 2rem;
+    padding: 0.55em 1.75em;
+    border-radius: 18px 0 1.5rem 0;
+    background: #eeeeee;
+    color: #888888;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    transition:
+      background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      color 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    > i.icon {
+      margin: 0 0.4em 0 0;
+      font-size: 0.9rem;
+      line-height: 1;
+    }
+  }
+  .gc-count-empty-marker {
+    max-width: 1em;
+    overflow: hidden;
+    opacity: 1;
+    transition:
+      max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 300ms ease;
+  }
+  .gc-count--empty .gc-count-label {
+    text-transform: none;
+  }
+  .gc-count-label {
+    max-width: 0;
+    margin-left: 0;
+    overflow: hidden;
+    opacity: 0;
+    text-transform: lowercase;
+    transition:
+      max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      margin-left 300ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 300ms ease;
+  }
+  &:hover .gc-count,
+  &:focus-within .gc-count {
+    background: var(--card-accent-color);
+    color: #ffffff;
+    .gc-count-label {
+      max-width: 8rem;
+      margin-left: 0.4em;
+      opacity: 1;
+    }
+    &.gc-count--empty {
+      .gc-count-empty-marker {
+        max-width: 0;
+        opacity: 0;
+      }
+      .gc-count-label {
+        margin-left: 0;
+      }
+    }
+  }
+}
+.ui.modal.group-modal {
+  --group-modal-gap: clamp(16px, 6vh, 56px);
+  --group-modal-gap: clamp(16px, 6dvh, 56px);
+  max-height: calc(100vh - 2 * var(--group-modal-gap));
+  max-height: calc(100dvh - 2 * var(--group-modal-gap));
+  > .true-modal-close {
+    min-width: 44px;
+    min-height: 44px;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+  .group-form {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .group-form-fields {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+    > .field {
+      min-width: 0;
+      margin: 0;
+    }
+    > .field:nth-child(n + 3) {
+      grid-column: 1 / -1;
+    }
+  }
+  .group-form > .actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    gap: 0.75rem;
+    background: #fff;
+    margin-top: 0;
+    padding: 0.75rem 0;
+    border-top: 1px solid #e2e8f0;
+    .button {
+      margin: 0;
+    }
+  }
+  .group-members {
+    overflow-x: auto;
+    margin-top: 1rem;
+  }
+  .group-members td {
+    overflow-wrap: anywhere;
+  }
+  .negative.button {
+    background: #e42135;
+    color: #fff;
+  }
+  .negative.button:hover {
+    background: #bb182a;
+  }
+  .true-modal-close[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .selection.dropdown {
+    min-width: 0;
+  }
+  .selection.dropdown .menu {
+    position: static;
+    max-height: 12rem;
+  }
+  .disabled,
+  [disabled] {
+    cursor: not-allowed;
+  }
+}
+@media (hover: none), (pointer: coarse) {
+  .td-group-card {
+    min-height: 12rem;
+  }
+  .td-group-card .gc-actions {
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+    a {
+      min-width: 2.75rem;
+      max-width: 2.75rem;
+      justify-content: center;
+      height: 2.75rem;
+    }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .td-group-card,
+  .td-group-card::before,
+  .td-group-card::after,
+  .td-group-card .gc-avatar,
+  .td-group-card .gc-content h3,
+  .td-group-card .gc-actions,
+  .td-group-card .gc-actions a,
+  .td-group-card .gc-action-label,
+  .td-group-card .gc-count,
+  .td-group-card .gc-count-empty-marker,
+  .td-group-card .gc-count-label {
+    transition: none;
+  }
+}
+
+.ui.modal.group-modal--info {
+  > .content {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+    padding: 1.25rem 1.5rem;
+  }
+  h3 {
+    margin: 1rem 0 0.5rem;
+    font-size: 1rem;
+  }
+  .group-members {
+    min-height: 0;
+    overflow: auto;
+    margin-top: 0;
+  }
+  .group-users-table.ui.table {
+    border: 0;
+    border-radius: 0;
+    font-size: 0.85rem;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: #fff;
+    }
+    th {
+      padding: 0.5rem 0.65rem;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid #e2e8f0;
+      color: #475569;
+    }
+    td {
+      padding: 0.4rem 0.65rem;
+      line-height: 1.3;
+    }
+    tbody tr:hover {
+      background: #f8fafc;
+    }
+    .ui.button {
+      margin: 0;
+    }
+    a:focus-visible,
+    th:focus-visible {
+      outline: 2px solid var(--td-card-accent, #002057);
+      outline-offset: -2px;
+    }
+  }
+  .group-column-heading {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.65rem;
+    flex-wrap: wrap;
+  }
+  .group-column-heading .ui.input {
+    width: 100%;
+    min-width: 8rem;
+    font-size: 0.85rem;
+  }
+  .group-column-heading .ui.input input {
+    min-width: 0;
+    padding: 0.5rem 2rem 0.5rem 0.65rem;
+  }
+}
+.ui.modal.group-modal--delete {
+  width: min(28rem, calc(100vw - 32px));
+  > .header:not(.ui) {
+    font-size: 1.75rem;
+    line-height: 1.25;
+    text-transform: none;
+  }
+  p {
+    overflow-wrap: anywhere;
+  }
+  > .actions .ui.negative.button {
+    background: var(--td-danger, #b91c1c);
+  }
+  .group-danger-text {
+    color: var(--td-danger, #b91c1c);
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 767px) {
+  .td-group-card .gc-content h3,
+  .td-group-card .gc-name,
+  .td-group-card .gc-description {
+    -webkit-line-clamp: 1;
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+}
+
+.ui.modal.group-modal--info {
+  width: min(80rem, calc(100vw - 32px));
+}
+.ui.dimmer.group-info-dimmer {
+  padding: 0;
+  > .ui.modal.group-modal--info {
+    margin: var(--group-modal-gap) auto !important;
+  }
+}
+.ui.modal.group-modal--info .group-users-table.ui.table {
+  table-layout: auto;
+  min-width: 34rem;
+  th,
+  td {
+    width: auto;
+  }
+}
+.ui.modal.group-modal--form {
+  width: min(64rem, calc(100vw - 32px));
+  > .content {
+    display: flex;
+    overflow: hidden;
+    padding: 0 1.5rem;
+  }
+  .group-form {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .group-form-fields {
+    flex: 1 1 auto;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
+    min-height: 0;
+    overflow-y: auto;
+    padding: 1rem 0;
+    align-content: start;
+  }
+  .group-form-fields > .field:first-child {
+    grid-column: 1 / -1;
+    margin-bottom: 1rem;
+  }
+  .group-form-fields > .field:nth-child(3) {
+    grid-column: auto;
+  }
+  .ui.form .field > label {
+    font-size: 0.9rem;
+    margin-bottom: 0.35rem;
+    color: #334155;
+  }
+  .ui.form input,
+  .ui.form textarea,
+  .ui.form select {
+    padding: 0.65rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.95rem;
+  }
+  .ui.form textarea {
+    min-height: 4.5rem;
+    resize: vertical;
+  }
+  .ui.form .field.group-name-field {
+    position: relative;
+    > label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      color: #64748b;
+      font-size: 20px;
+      line-height: 1.4;
+      transform: translateY(1.65rem);
+      transform-origin: top left;
+      transition:
+        transform 180ms ease,
+        color 180ms ease;
+      cursor: text;
+    }
+    input {
+      min-height: 4.6rem;
+      padding: 1.65rem 0 0.65rem;
+      border: 0;
+      border-bottom: 1px solid #cbd5e1;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      color: #0f172a;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 1.4;
+      transition: border-color 180ms ease;
+      &::placeholder {
+        color: transparent;
+        opacity: 0;
+      }
+      &:focus {
+        border-bottom-color: var(--td-card-accent, #002057);
+      }
+    }
+    &:focus-within > label,
+    &.group-name-field--filled > label {
+      color: var(--td-card-accent, #002057);
+      transform: translateY(0) scale(0.7);
+    }
+    &.error {
+      > label {
+        color: #9f3a38;
+      }
+      input {
+        border-bottom-color: #9f3a38;
+      }
+    }
+  }
+  .group-member-picker {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
+    gap: 1rem;
+    &.group-member-picker--without-filters {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+  .group-member-filters {
+    padding-right: 1rem;
+    border-right: 1px solid #e2e8f0;
+    min-width: 0;
+  }
+  .group-member-selection {
+    min-width: 0;
+  }
+  .group-member-filters .field:last-child {
+    margin-bottom: 0;
+  }
+  .group-member-filters .ui.dropdown {
+    width: 100%;
+    min-width: 0;
+  }
+}
+@media (max-width: 767px) {
+  .ui.modal.group-modal--form .group-member-picker {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ui.modal.group-modal--form .group-member-filters {
+    padding-right: 0;
+    border-right: 0;
+  }
+}
+
+.ui.modal.group-modal--info > .header:not(.ui) {
+  min-height: 5.5rem;
+  padding: 0 3.5rem 0 0;
+  gap: 0;
+  font-size: 1.9rem;
+  line-height: 1.2;
+  > .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    width: 48px;
+    height: 48px;
+    padding: 20px 24px;
+    font-size: 48px;
+    line-height: 1;
+  }
+  .true-modal-heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 4rem;
+    padding: 0.75rem 0;
+  }
+  .true-modal-subtitle {
+    font-size: 1rem;
+    line-height: 1.4;
+    min-height: 1.4em;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    max-height: 4.2em;
+    overflow-y: auto;
+    &:empty {
+      display: none;
+    }
+  }
+}
+.ui.modal.group-modal--form {
+  .group-member-picker {
+    border-top: 1px solid #e2e8f0;
+    padding-top: 1rem;
+    margin-top: 0.25rem;
+  }
+  .group-member-selection .ui.selection.dropdown {
+    min-height: 2.75rem;
+  }
+  .group-selected-members {
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    margin-top: 0.75rem;
+    h4 {
+      font-size: 0.9rem;
+      margin: 0;
+      padding: 0.65rem 0.75rem;
+      background: #f8fafc;
+      border-radius: 0.5rem 0.5rem 0 0;
+    }
+    h4 span,
+    small {
+      color: #64748b;
+      font-weight: 400;
+    }
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      max-height: 14rem;
+      overflow-y: auto;
+    }
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      padding: 0.4rem 0.75rem;
+      border-top: 1px solid #e2e8f0;
+    }
+    li > span {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+    strong {
+      font-size: 0.9rem;
+    }
+    small {
+      display: block;
+      font-size: 0.8rem;
+    }
+    .ui.button {
+      flex-shrink: 0;
+      margin: 0;
+      min-width: 44px;
+      min-height: 44px;
+      padding: 0.4rem;
+      font-size: 0.75rem;
+    }
+    p {
+      padding: 0.75rem;
+      color: #64748b;
+      font-size: 0.9rem;
+    }
+  }
+}
+@media (max-width: 767px) {
+  .ui.modal.group-modal--form .group-form-fields {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui.modal.group-modal--form .ui.form .field.group-name-field {
+    > label,
+    input {
+      transition: none;
+    }
+  }
+}
+
+.ui.modal.group-modal--info .group-users-table.ui.sortable.table thead th:hover,
+.ui.modal.group-modal--info
+  .group-users-table.ui.sortable.table
+  thead
+  th.sorted {
+  background: transparent;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.ui.modal.group-modal--form .group-member-picker {
+  .ui.selection.dropdown {
+    min-height: 2.75rem;
+    padding-right: 2.5rem;
+    border-radius: 0.5rem;
+    > .dropdown.icon {
+      top: 0;
+      right: 0;
+      width: 2.5rem;
+      height: 2.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      line-height: 1;
+      transform: none;
+    }
+    > input.search {
+      padding-right: 2.5rem;
+    }
+    &.active {
+      z-index: 21;
+    }
+  }
+  .ui.multiple.dropdown > .label {
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}
+
+.ui.modal.group-modal--form .group-dropdown-anchor {
+  margin-bottom: 1rem;
+}
+.ui.modal.group-modal--form .group-dropdown-anchor:last-child {
+  margin-bottom: 0;
+}
+.ui.dropdown > .menu.group-dropdown-layer {
+  overflow-y: auto;
+  border: 1px solid #96c8da;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
+}
+.ui.dropdown > .menu.group-dropdown-layer:popover-open {
+  display: block;
+}
+
+.ui.modal.group-modal--form .group-form > .actions .group-delete-action {
+  margin-right: auto;
+  color: #e42135;
+  background: transparent;
+  text-transform: uppercase;
+}
+.ui.modal.group-modal--info .group-members-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  > .icon {
+    color: #64748b;
+    font-size: 2rem;
+  }
+  h3 {
+    font-size: 1.15rem;
+    color: #334155;
+  }
+  p {
+    color: #64748b;
+    margin-bottom: 1.25rem;
+  }
+}
+.ui.modal.group-modal--form .group-add-control {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75rem;
+  .group-dropdown-anchor {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-bottom: 0;
+  }
+  .group-add-all.ui.button {
+    flex: 0 0 auto;
+    min-height: 44px;
+    margin: 0;
+    padding: 0.75rem;
+    font-size: 0.85rem;
+    color: #334155;
+    background: #f1f5f9;
+  }
+}
+@keyframes group-member-added {
+  from {
+    background-color: fade(@secondaryColor, 14%);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.group-selected-members li.group-member-added {
+  animation: group-member-added 900ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .group-selected-members li.group-member-added {
+    animation: none;
+    background-color: fade(@secondaryColor, 14%);
+  }
+}
+@media (max-width: 767px) {
+  .ui.modal.group-modal--info > .header:not(.ui) {
+    font-size: 1.5rem;
+    > .icon {
+      width: 32px;
+      height: 32px;
+      padding: 16px;
+      font-size: 32px;
+    }
+  }
+  .ui.modal.group-modal--form .group-add-control {
+    flex-direction: column;
+    align-items: stretch;
+    .group-dropdown-anchor {
+      flex-basis: auto;
+    }
+  }
+  .ui.modal.group-modal--form .group-form > .actions .group-delete-action {
+    flex-basis: 100%;
+    text-align: left;
+  }
+}
+@media (max-width: 479px) {
+  .ui.modal.group-modal--form .group-form > .actions {
+    gap: 0.4rem;
+    .ui.button {
+      min-width: 0;
+      padding: 0.75rem 0.5rem;
+      font-size: 0.75rem;
+    }
+  }
+}
+.ui.modal.group-modal--form .group-selected-members {
+  .group-member-identity {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+  }
+  .group-member-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 2rem;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: #eef2f6;
+    color: #334155;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .group-member-details {
+    min-width: 0;
+  }
+  .group-member-name {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .group-member-type {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: #64748b;
+    cursor: help;
+    font-size: 0.75rem;
+    border-radius: 0.2rem;
+    &:focus-visible {
+      outline: 2px solid var(--td-card-accent, #002057);
+      outline-offset: 3px;
+    }
+    .icon {
+      margin: 0;
+    }
+  }
+}
+
+.ui.modal.group-modal--new > .header:not(.ui) {
+  background: @secondaryColor;
+  color: #fff;
+}