@import "tokens";
@import "mixins";

$table-color: $color-panel!default;
$table-color-light: $color-panel--lighten!default;
$table-border-color: $color-controlborder!default;
$col-header-height: $size-xxl!default;
$col-min-width: 90px!default;
$col-min-width-small: 45px!default;
$col-padding-vertical: $spacing-xs!default;
$col-padding-horizontal: $spacing-xxxs!default;
$col-padding: $col-padding-vertical $col-padding-horizontal!default;
$identity-col-width: 305px!default;
$identity-col-width-small: 200px!default;
$identity-col-width-mobile: 150px!default;
$identity-col-padding: $spacing-xs $spacing-xxs!default;
$identity-col-spacing: $spacing-xxxs!default;
$identity-number-width: $size-s!default;
$identity-photo-width: $size-m!default;
$cell-group-padding-top: $spacing-s!default;
$cell-group-border-color: $color-controlborder!default;
$cell-group-border-style: dashed!default;

.statistic-table {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  color: $color-panel-font;

  .scroll-left,
  .scroll-right {
    position: absolute!important;
    top: 0;
    height: 80px;
    padding: 0 10px;
    @include centered-flex();
    z-index: 5;
    @include tablet-media {
      display: none;
    }
  }

  .scroll-left {
    left: 0;
  }

  .scroll-right {
    right: 0;
  }

  &.has-identity-col {
    .scroll-left {
      left: $identity-col-width;
      @include phone-media {
        left: $identity-col-width-mobile;
      }
    }
  }

  .scroll-wrapper {
    display: flex;
    width: 100%;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: 20;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
  }

  &.with-scroll {
    .scroll-wrapper {
      overflow: auto;
    }
  }

  &.statistic-table--bordered {
    .table-row {
      .table-cell {
        border-right: 1px solid $table-border-color;

        &:last-child {
          border-right: none;
        }
      }
    }
  }

  &.with-groups {
    .scroll-left,
    .scroll-right {
      height: 94px;
    }
    .table-row {
      &.header {
        .table-cell {
          padding-top: $col-padding-vertical + $cell-group-padding-top;
        }
      }

      .table-cell {
        border: none;

        &.identity {
          border-right: 1px solid $cell-group-border-color;
        }

        &.identity + .table-cell-group {
          border-left: none;
        }

        &.identity + .table-cell-group-header .table-cell-group {
          border-left: none;
        }
      }
    }
  }

  &.statistic-table--small {
    .table-row {
      &.header {
        .table-cell {
          @include font-text-description();
        }
      }

      .table-cell {
        min-width: $col-min-width-small;
        width: $col-min-width-small;

        &.identity {
          flex: 1 0 $identity-col-width-small;
          @include phone-media {
            flex: 1 0 $identity-col-width-mobile;
          }
        }
      }
    }
  }

  .content {
    flex-grow: 1;
  }

  .table-row {
    display: flex;

    &.header {
      z-index: 4;

      .table-cell-group-header {
        position: relative;
        z-index: 2;
        display: flex;
        background: $table-color;
        flex-shrink: 0;

        & + .table-cell-group-header {
          .table-cell-group {
            border-left: none;
          }
        }

        > .title {
          position: absolute;
          top: $cell-group-padding-top;
          left: 50%;
          z-index: 2;
          transform: translate(-50%, -50%);
          padding: 5px;
          background: $table-color-light;
          color: $color-panel-font;
          @include font-h6();
          text-transform: uppercase;
          text-align: center;
        }
      }

      .table-cell-group {
        margin-top: $cell-group-padding-top;
        border-top: 1px $cell-group-border-style $cell-group-border-color;

        .table-cell {
          padding-top: $col-padding-vertical;
        }
      }

      .table-cell {
        @include font-h6();

        &.sortable {
          cursor: pointer;
        }

        &.highlight {
          @include font-h6();
        }
      }
    }

    &:nth-child(2n + 1) {
      .table-cell,
      .table-cell-group-header {
        background-color: $table-color-light;
      }
    }

    .table-cell-group {
      position: relative;
      display: flex;
      border-right: 1px $cell-group-border-style $cell-group-border-color;
      border-left: 1px $cell-group-border-style $cell-group-border-color;
      flex-shrink: 0;

      & + .table-cell-group {
        border-left: none;
      }

      .table-cell {
        border: none;
        //width: 70px;
      }
    }

    .table-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-width: $col-min-width;
      width: $col-min-width;
      flex: 1 0;
      padding: $col-padding;
      background: $table-color;
      text-align: center;

      &.highlight {
        color: $color-primary;
        @include font-h4();
      }

      &.identity {
        position: sticky;
        left: 0;
        z-index: 3;
        display: flex;
        flex-direction: row;
        text-align: left;
        flex: 1 0 $identity-col-width;
        @include phone-media {
          flex: 1 0 $identity-col-width-mobile;
          > .photo {
            display: none;
          }

          > .info {
            font-size: 12px;
          }
        }

        > .number {
          flex-shrink: 0;
          width: $identity-number-width;
          margin-right: $identity-col-spacing;
          text-align: center;
        }

        > .photo {
          flex-shrink: 0;
          width: $identity-photo-width;
          height: $identity-photo-width;
          margin-right: $identity-col-spacing;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        > .info {
          flex-grow: 1;
          overflow: hidden;
          @include font-text-bodybold();

          a {
            display: block;
            @include transition-link();
          }

          > .name {
            width: 100%;
          }

          .text-muted {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            @include font-text-body();
            color: $color-textsecondary;
          }
        }

        a {
          color: $color-panel-font;
        }
      }

      .hidden-title {
        @include font-h6();
        opacity: 0;
        line-height: 0;
        height: 0;
      }
    }
  }

  .subtitle {
    display: flex;

    .text {
      position: sticky;
      left: 0;
      padding: $col-padding;
      color: $color-textsecondary;
    }
  }
}