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

.teams-list-page {
  .teams-page-header {
    padding-bottom: 16px;
  }

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

    .search {
      flex-grow: 1;
    }

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

    .dark & {
      border-color: colors.border-color(dark);
    }
    .mat-mdc-form-field-subscript-wrapper {
      display: none; // remove bottom padding used for hint
    }
  }
  .mat-mdc-floating-label {
    .light & {
      color: colors.on-color-deemphasis(light);
    }
    .dark & {
      color: colors.on-color-deemphasis(dark);
    }
  }

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

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

  .table-container {
    max-width: 60em;
    margin: 0 auto;
    border-radius: 4px;

    .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;
        }
        tbody tr:hover {
          cursor: pointer;
        }

        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;
        }

        // cell with just an icon in it
        .mat-mdc-cell.icon-cell {
          width: 24px; //no need for text, icons are 24px wide
          .mat-icon {
            vertical-align: middle;
          }
        }

        //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;
          }
        }
      }
    }
  }
}
