@import './../../theme/forms';
@import 'variables';

.bkn-datagrid.ios {
  .bkn-data-grid-table {
    overflow-y: auto!important;

    .grid-table {
      border-top: 1px solid $border-color;
    }
  }
}

.bkn-datagrid.windows, .bkn-datagrid.linux {
  .bkn-data-grid-table {
    overflow-y: hidden;

    .grid-table {
      .grid-thead {
        .grid-tr{
          padding-right: 17px;
          background-color: #f9f9f9;
        }
      }
    }
  }
}

.bkn-data-grid-table {
  flex: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  > div > div:nth-child(2),
  .grid-tbody > div > div:nth-child(3) {
    z-index: 2;
  }

  .grid-table {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: relative;

    .grid-thead {
      z-index: 5;

      .grid-th {
        color: rgba(0,0,0,.54);
        background-color: #f9f9f9;
        border-top: none;
        border-width: 1px;
        cursor: pointer;
        padding: 0 1.5rem;

        &.no-sort {
          cursor: default;
        }

        .sort-icon {
          font-size: 1rem;
          margin-left: 0.25rem;
          line-height: 0;
          opacity: 0;
          transition: all 0.2s;
        }

        &:hover {
          .sort-icon {
            opacity: 0.5;
          }
        }

        &.active {
          font-weight: 700;

          &.desc {
            .sort-icon {
              transform: rotate(180deg);
            }
          }

          .sort-icon {
            opacity: 1;
          }
        }
      }
    }

    .grid-tbody {
      display: flex;
      flex: 1;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      > div {
        height: auto !important;
        flex: 1;
      }
    }

    .grid-trs-placeholders {
      position: absolute;
      bottom: 0;
      width: 100%;
      z-index: 1;
    }

    .grid-trs {
      position: relative;
      z-index: 2;
      background-color: #fff;
    }

    .grid-tr {
      display: flex;
      flex-direction: row;
      height: 54px;
      z-index: 5;

      &:hover {
        background-color: rgb(250, 250, 250);
      }

      .grid-td {
        padding: 0 1rem;

        &.grid-td-placeholder {
          &.loading {
            &:after {
              content: "";
              display: block;
              width: 100%;
              height: 0.8rem;
              background-color: #f3f3f3;
            }
          }
        }
      }

      .grid-td, .grid-th {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 1px solid $border-color;
        border-left: none;
        border-top: none;
        font-size: 0.8rem;
        font-weight: 400;
        flex-flow: row nowrap;
        flex-grow: 1;
        flex-basis: 0;
        padding: 0.5em 1rem;
        word-break: break-word;

        &:first-child {
          border-left: 1px solid $border-color;
        }

        @media (min-width: 927px) {
          &:last-child {
            border-right: none;
          }
        }

        &.checkbox {
          width: 59px;
          justify-content: center;
          flex: 0;
          padding: 1rem 1.3rem;

          .custom-checkbox {
            min-height: 1rem;
            min-width: 1rem;
            margin: 0;
            padding: 0;
          }

          .custom-control-indicator {
            top: 0;
          }
        }
      }
    }
  }
}