/* Display and positioning of the table and its elements */

.table-wrapper {
  overflow: auto;
  position: relative;
  width: 100%;

  .table {
    border-collapse: collapse;
    display: table;
    margin-bottom: 20px;
    overflow: auto;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
  }

  .table-header {
    display: table-header-group;
    text-align: center;
    vertical-align: middle;

    &>div {
      display: table-cell;
      white-space: nowrap;
    }
  }

  .table-body {
    display: table-row-group;

    &>div {
      display: contents;

      &>sib-display {
        display: table-row;

        &>div {
          display: contents;

          &>* {
            display: table-cell;
          }
        }
      }

      &>sib-multiple {
        display: contents;

        &>div {
          display: contents;

          &>hubl-team-template-edit {
            display: table-row;

            &>* {
              display: table-cell;
            }
          }
        }
      }
    }
  }
}

/* Styles of the tables and its elements */

.table-header {
  font-size: 1.6rem;
  font-weight: 600;

  &.grey-color {
    background: var(--color-table-header-background);
    color: var(--color-table-header-text);
  }

  >* {
    border-right: 1px solid var(--color-table-border);
    padding: 2.1rem 0;
    text-align: center;
  }

  >*:last-of-type {
    border-right: 1px solid --color-table-header-background;
  }
}

.table-body {
  border-left: 1px solid var(--color-table-border);
  border-right: 1px solid var(--color-table-border);
}

.table-body,
.table-header {

  .border {
    border-bottom: 1px solid var(--color-table-border);
    border-right: 1px solid var(--color-table-border);
  }

  /* Fix. Could disappear when we can add .class on set fields */
  [name^='cell-1'] {
    @extend .w786;
    @extend .border;
  }

  .w786 {
    width: 786px;
  }

  .w262 {
    width: 262px;
  }

  .w349 {
    width: 349px;
  }

  .w698 {
    width: 698px;
  }

  .hashtag::before {
    content: '#';
  }
}

/* Styles of specific cells */

.cell-with-buttons {
  text-align: center;
  vertical-align: middle;

  [name='button'] {

    input[type='submit'] {
      @extend
      .button,
      .text-bold,
      .text-uppercase,
      .reversed,
      .button-secondary,
      .bordered,
      .btn-margin-left;
    }
  }
}

.cell-with-name {
  color: var(--color-secondary);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* Styles of elements inside cells */

.user-thumb>div,
[name='user-thumb'] {
  @extend %user-thumb__grid;
  padding: 0 2.2rem;

  >.user-thumb__picture {
    @extend .user-thumb__picture;
  }

  >[name='sup'] {
    @extend %user-thumb__grid-sup;
  }

  >[name='sub'] {
    @extend %user-thumb__grid-inf;
  }
}

.table sib-ac-checker {
  text-align: center;
  vertical-align: middle;
}

.circle-join {
  position: relative;
  width: 181px;
  margin: 0 auto;
  min-width: 181px;

  input {
    height: 29px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 102%;
    padding-left: 14px !important;
  }

  &.button.with-icon::before {
    margin-left: 6px;
  }
}

.circle-leave {
  position: relative;
  width: 40%;
  min-width: 40%;

  &>button {
    height: 29px;
    padding-left: 13px;
    position: absolute;
    left: 1px;
    top: -1px;
    width: 106%;
  }

  &.button.with-icon::before {
    font-size: 1.6rem;
    margin-right: 2rem !important;
    margin-left: -50px;
  }
}