@import './../../theme/buttons';
@import './../../theme/forms';
@import './../../theme/visibility';
@import 'variables';
@import "node_modules/@material/animation/functions";

.bkn-datagrid-header {
  min-height: 54px;
  border-bottom: 1px solid $border-color;
  display: flex;

  .btn.btn-icon {
    border: none;
    border-left: 1px solid $border-color;
  }

  .bkn-datagrid-header-left {
    display: flex;
    flex-grow: 1;
    height: 54px;
  }

  .search-property-select {
    display: flex;
    align-items: center;
    padding: 0 1rem;

    select {
      min-width: 8rem;
      margin-left: 0.8rem;
    }
  }

  .btn.btn-icon.btn-square.btn-list-action {
    background-color: #9425b2;
    background-image: linear-gradient(to right, #9425b2 10%, #814ce6 100%);
    border: none;
    height: 55px;

    &:hover, &:focus {
      background-image: none;
      color: #fff;
    }
  }

  .input-search {
    height: inherit;
    position: relative;
    padding-left: 3rem;
    flex: 1;
  }

  .input-search {
    .icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 39px;
      height: 100%;
      padding-left: .9rem;
    }  

    .material-icons {
      display: flex;
      position: relative;
      left: 0;
      top: 0;
      height: 100%;
      color: $text-color-clear;
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      transition: mdc-animation-enter(opacity, .13s), mdc-animation-enter(transform, .33s);
      align-items: center;
    }

    .search {
      opacity: 1;
    }

    .close {
      opacity: 0;
    }

    &.searching {
      .material-icons {
        transform: translateY(-54px);
      }

      .search {
        opacity: 0;
      }

      .close {
        opacity: 1;
      }
    }
  }

  input[type="search"] {
    height: 54px;
    border: none;
    padding: 1rem 1rem .8rem 0;
    background-color: transparent;
    font-size: 14px;
  }
}

.bkn-datagrid-header-right {
  color: $text-color-clear;
  height: 54px;
  line-height: 0.5;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  @media (max-width: 992px) {
    background-color: #fff;
    position: absolute;
    left: 75px;
    top: 0;
    width: calc(100% - 75px);
    transform: translateX(100%);
    transition: all 0.4s;

    &.sm-active {
      transform: translateX(0);
    }

    &.no-main-button {
      left: 0;
      width: 100%;
    }
  }

  small {
    margin-right: 1rem;
  }

  .view-mode-menu { 
    .dropdown-menu { 
      margin: 0; 
      padding: 0; 
      width: 59px; 
      min-width: initial; 
      flex-direction: column; 
      border-radius: 0; 
      box-shadow: none; 
      right: 1px; 
      z-index: 8; 
 
      .show & { 
        display: flex; 
      } 
 
      .btn-icon { 
        border: 1px solid #E6E6E6; 
        border-bottom: none; 
 
        &:last-child { 
          border-bottom: 1px solid #E6E6E6; 
        } 
      } 
    } 
  } 
}