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

.table-wrapper {
  overflow: auto;
  position: relative;
  width: 100%;
  margin-bottom: 6rem;

  @include breakpoint(lg) {
    margin-bottom: 0;
  }

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

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

        &>div {
          display: contents;

          &>* {
            border-bottom: 1px solid var(--color-table-border);
            display: table-cell;
            vertical-align: middle;
          }
        }
      }

      &>solid-multiple {
        display: contents;

        &>div {
          display: contents;

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

            &>* {
              border-bottom: 1px solid var(--color-table-border);
              display: table-cell;
              text-align: center;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}

/* Styles of the table and its elements */

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

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

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

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

.table-body,
.table-header {

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

.table-body,
.table-header {

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

  .w280 {
    width: 280px;
  }

  .w230 {
    width: 230px;
  }

  .w70 {
    width: 70px;
  }

  .w162 {
    width: 162px;
  }

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

/* Styles of specific cells */

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

  [name='button'] {

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

.cell-with-name {
  color: var(--color-secondary);
  font-weight: 600;
  padding-left: 2rem;
  text-align: left;
}

/* Styles of elements inside cells */

.user-thumb>div,
[name='user-thumb'] {
  vertical-align: middle;
  text-align: left;
  @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 solid-ac-checker {
  text-align: center;
}

.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: 164px;
  margin: 0 auto;
  min-width: 164px;

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