@use '../../../style/globals';
@use '../../../style/colors';

.table-container {
  max-width: 60em;
  margin: 0 auto;
  border-radius: 4px;
  .mat-mdc-chip-action-label {
    font-weight: 500 !important;
  }
  .role,
  .status {
    &.active {
      background-color: colors.color(active);
    }
    &.pending {
      background-color: colors.color(pending);
    }
  }

  .input-group {
    font-size: 16px;
    width: 100%;
    display: flex;
    flex-direction: row;

    .search {
      flex-grow: 1;
    }

    .mat-mdc-floating-label {
      .light & {
        color: colors.on-color-deemphasis(light);
      }
      .dark & {
        color: colors.on-color-deemphasis(dark);
      }
    }

    .light & {
      border-color: colors.border-color(light);
    }

    .dark & {
      border-color: colors.border-color(dark);
    }
    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }
  }

  .mat-mdc-checkbox {
    padding: 12px;
  }

  .align-right {
    justify-content: flex-end;
  }

  .dark & {
    border: 1px solid colors.border-color(dark);
  }

  .light & {
    border: 1px solid colors.border-color(light);
  }

  .scroll-container {
    width: 100%;
    overflow: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    .dark & {
      border-bottom: 1px solid colors.border-color(dark);
    }
    .light & {
      border-bottom: 1px solid colors.border-color(light);
    }

    table {
      flex: 1 0 auto;
      width: 100%;

      .nowrap {
        white-space: nowrap;
      }

      th,
      td {
        .light & {
          background: colors.color(light);
          border-color: colors.border-color(light);
        }

        .dark & {
          background: colors.color(dark);
          border-color: colors.border-color(dark);
        }
      }

      th {
        font-size: 20px;
        @extend .text-label;
      }

      tr.element-row:not(.expanded):hover {
        .light & td {
          background: colors.color-alternate(light);
        }

        .dark & td {
          background: colors.color-alternate(dark);
        }
      }

      .mat-mdc-cell + .mat-cell,
      .mat-mdc-header-cell + .mat-header-cell {
        padding-left: 12px;
      }

      //row action styles
      .mat-mdc-cell.mat-column-end-action,
      .mat-cell.mat-column-start-action {
        cursor: pointer;

        .dark & {
          background: colors.color(dark);
        }

        .light & {
          background: colors.color(light);
        }

        &:hover {
          background: colors.color(primary) !important;
          color: colors.on-color(primary);
        }
      }

      .mat-column-start-action {
        &.mat-mdc-cell {
          .light & {
            outline: 1px solid colors.border-color(light);
          }

          .dark & {
            outline: 1px solid colors.border-color(dark);
          }
        }

        padding-left: 12px;
        padding-right: 12px;
      }

      .mat-column-end-action {
        &.mat-mdc-cell {
          .light & {
            outline: 1px solid colors.border-color(light);
          }

          .dark & {
            outline: 1px solid colors.border-color(dark);
          }
        }

        padding-right: 12px;
      }

      .mat-column-select {
        // overflow: initial;
        &.many {
          width: 28px;
        }

        &.one {
          width: 30px;
        }
      }
    }
  }
}
