@import "../../variables.scss";

.DashboardTable {
  border: solid 1px #e5e5e5;
  border-radius: $bdr-rds + 5;
  overflow-x: auto;
  max-width: 100%;
  .StyledTable {
    border-collapse: separate;
    border-spacing: 0;
    position: relative;
    margin-bottom: 0;
    text-align: center;
    tr {
      th {
        font-size: $font + 6;
        font-weight: $font-weight-heavy;
        color: $black;
        padding: $pad;
        background: $white;
        border-right: solid 1px #e5e5e5;
        // white-space: nowrap;
        &:last-child {
          border-right: none;
        }
        @media (max-width: $lg) {
          font-size: $font + 6;
        }
        @media (max-width: $md) {
          font-size: $font + 2;
          padding: $pad - 5;
        }
      }
      td {
        font-size: $font + 5;
        color: $black;
        padding: $pad - 2 $pad;
        border-right: solid 1px #e5e5e5;
        // white-space: nowrap;
        &:last-child {
          border-right: none;
        }
        @media (max-width: $lg) {
          font-size: $font + 4;
        }
        @media (max-width: $md) {
          font-size: $font + 2;
          padding: $pad - 5;
        }
      }
    }
  }
  .FixedColumn {
    position: sticky;
    left: 0;    
    background-color: $white;    
    &.ColumnWidth80 {
      width: 80px;
      min-width: 80px;
      max-width: 80px;
      left: 0;      
      @media (max-width: $lg) {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
      }
      @media (max-width: $md) {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
      }
    }
    &.ColumnWidth150 {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
      left: 80px;      
      @media (max-width: $lg) {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        left: 60px;
      }
      @media (max-width: $md) {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        left: 40px;
      }
    }
    &.ColumnWidth100 {
      width: 100px;
      min-width: 100px;
      max-width: 100px;
      left: 230px;
      background-color: #f0f0f0;      
      @media (max-width: $lg) {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        left: 160px;
      }
      @media (max-width: $md) {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        left: 120px;
      }
    }
    &.FixedTop {
      top: 0;
    }
    &.FixedBottom {
      bottom: 0;
      background-color: #f0f0f0; 
    }
    &.BgWhite {
      background-color: $white;
    }
  }
}

.ZIndex {
  z-index: 3;
}