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

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

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

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

  .table-header {
    display: table-header-group;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid #C9C8C8;
    border-left: 1px solid #C9C8C8;
    background: var(--color-third);
    color: var(--color-heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.25px;

    &>.table-cell {
      display: table-cell;
      height: 50px;
      text-align: center;
      vertical-align: middle;
      border-right: 1px solid white;
      white-space: nowrap;

      &:last-child {
        border-right: 1px solid #C9C8C8;
      }
    }
  }

  .table-body {
    display: table-row-group;
    border-left: 1px solid #C9C8C8;

    &>div {
      display: contents;

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

        &>div {
          display: contents;

          &>.table-cell {
            border-bottom: 1px solid #C9C8C8;
            border-right: 1px solid #C9C8C8;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            height: 64px;
          }
          solid-multiple[name="user.communities"] {
            text-align: left;
          }
        }
      }

      /*&>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-body,
.table-header {

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

  .w280 {
    width: 280px;
  }

  .w450 {
    width: 450px;
  }

  .w370 {
    width: 370px;
  }

  .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;
      @extend .text-bold;
      @extend .text-uppercase;
      @extend .reversed;
      @extend .button-secondary;
      @extend .bordered;
      @extend .desktop-btn-margin__left;
    }
  }

  &.is-spaced {
    padding: 0.8rem 2.2rem;
  }
}

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

/* Styles of elements inside cells */

.table {
  
  .user-thumb.is-spaced,
  [name='user-thumb'] {
    padding: 0.8rem 2.2rem;
  }
}

.table solid-ac-checker {
  /*text-align: center;*/
}