@use "@material/animation/_index" as animation;
@use "@material/elevation/_index" as elevation;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/textfield/_index" as textfield;
@use "@material/typography/_index" as typography;
@use "~/util";

.users-container {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
  .users {
    .mdc-data-table {
      overflow: visible;
      border: none;
      .mdc-data-table__header-row {
        &.progress-row {
          height: 0;
          border: none;
          .mdc-data-table__header-cell {
            height: 0;
            padding: 0;
            .mdc-linear-progress {
              height: 0px;
              transition: animation.standard(height, 100ms);
            }
          }
          &.loading .mdc-data-table__header-cell .mdc-linear-progress {
            height: 4px;
          }
        }
      }
      .mdc-data-table__row {
        .mdc-data-table__cell {
          .mdc-text-field.nickname {
            height: 32px;
            width: 112px;
            .mdc-text-field__input {
              padding: 0 12px;
              @include typography.typography(body2);
              font-family: inherit;
            }
          }
          .autocomplete.mdc-menu .mdc-list-item {
            padding: 0 12px;
            height: 40px;
            @include typography.typography(body2);
            font-family: inherit;
          }
        }
      }
      .button-container {
        align-self: center;
        @include rtl.reflexive-box(margin, right, auto);
        padding: 8px;
      }
    }
  }
  .user {
    &-container {
      margin: -8px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      max-width: calc(100% + 16px);
    }
    margin: 8px;
    flex: 1 1 256px;
    .mdc-list {
      padding: 0;
      &-item {
        user-select: text;
        .rmwc-avatar.mdc-list-item__graphic {
          width: 48px;
          height: 48px;
          @include rtl.reflexive-box(margin, right, 16px);
        }
      }
    }
    .rmwc-collapsible-list {
      @include util.divider-border(bottom);
    }
    .text-field-container {
      padding: 16px;
      flex-grow: 1;
      display: flex;
      .mdc-text-field,
      .mdc-menu-surface--anchor {
        width: 100%;
      }
    }
    .mdc-card__actions {
      @include util.divider-border(top);
    }
  }
}

.admin-main {
  flex-grow: 1;
}
