@use '../../../../../apps/kouncil/src/styles/buttons';
@import '../../../../../apps/kouncil/src/styles/spaces';
@import '../../../../../apps/kouncil/src/styles/palette';

.user-groups-header {
  margin: $space-5;
  display: flex;
  flex-direction: row;
  align-items: center;

  .user-groups-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    flex-basis: 100%;
  }

  .user-groups-actions {
    display: flex;
    gap: 16px;

    .action-button-white {
      @include buttons.button-white;
    }

    .action-button-blue {
      @include buttons.button-blue;
    }
  }
}

.user-groups-main-container {
  display: flex;
  flex-direction: column;
  gap: $space-5;
  margin: $space-5;

  .user-group-title {
    font-size: 16px;
    font-weight: 500;
  }

  .user-groups-table-header-row {
    font-size: 12px;
  }

  .user-groups-table-header-row, .user-groups-table-row {
    display: flex;
    flex-direction: row;
    height: 32px;
    padding: $space-2;

    .user-groups-label-column {
      flex-basis: 15%;
      display: flex;
      place-items: center;
      place-content: center;
      font-size: 12px;
    }

    .user-groups-table-header-row-columns, .user-groups-table-row-columns {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-basis: 85%;

      .user-groups-table-header-row-column, .user-groups-table-row-column {
        display: flex;
        place-items: center;
        place-content: center;
      }
    }
  }
}
