@import './../../theme/reboot';
@import './../../theme/display';
@import './../../components/card';
@import './../../components/progress';
@import 'variables';

.bkn-datagrid {
  height: 100%;
  display: flex;
  position: relative;

  .progress {
    height: 3px;
    width: 100%;
    position: absolute;
    top: 52px;
    z-index: 10;
    border-radius: 0;
    transition: all 0.3s;
    opacity: 0;

    &.progress-active {
      opacity: 1;
    }

    &.no-top {
      top: 0;
    }

    .progress-bar {
      width: 100%;
      transition: all 0.3s;
      background-color: #8007d4;
      background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    }
  }

  .bkn-datagrid-inner {
    height: inherit;
    overflow: hidden;
    flex: 1;

    &.filters-active {
      .bkn-datagrid-data-column {
        width: calc(100% - 220px);

        @media (max-width: 576px) {
          width: 100%;
        }
      }

      .bkn-datagrid-filter-column {
        transform: translateX(0);
      }
    }
  }

  .bkn-datagrid-data-column {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.3s;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;

    @media (min-width: 576px) {
      padding-right: 0;
    }
  }

  .item-status {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1rem;
    margin-right: 0.8rem;

    &.green {
      background-color: #5cb85c;
    }

    &.yellow {
      background-color: #f0ad4e;
    }

    &.gray {
      background-color: #BDC3C7;
    }

    &.red {
      background-color: #d24444;
    }
  }
}