.ui-grid-header-viewport {
  border-bottom: $ui-grid-border;
  overflow:hidden;
}

.ui-grid-header {
  transition: all ease .3s;

  .ui-grid-header-cell-primary-focus {
    display: inline;
    height:35px;
    padding: 8px;

    &:focus {
      outline: none;
    }
  }

  .ui-grid-column-menu-button {
    box-sizing: border-box;
    color : $wk-primary-black;
    display: inline;
    padding: 4.5px;
    max-width: 35px;
    max-height: 35px;
    text-align: center;
    transition-property: background-color, color;
    transition-duration: .15s;
    transition-timing-function: ease-in;
    width: 20%;


    &:hover,
    &:focus,
    &:active {
      background-color: $wk-primary-gray-tint1;
      color: $wk-primary-white;
    }
  }

  .sortable {
    display: flex;
    transition-property: background-color;
    transition-duration: .3s;
    transition-timing-function: ease-in;

    &:hover {
      background-color: $wk-primary-gray-tint5;
    }
  }

  .sortable[aria-sort=ascending],
  .sortable[aria-sort=descending] {
    background-color: $wk-primary-green-tint3;
    display: flex;

    span:last-of-type {
      display: none;
    }

    .ui-grid-header-cell-label::after {
      margin-left: 5px;
    }
  }

  .ui-grid-sort-priority-number {
    display: none;
  }
}

/* Slide up/down animations */
.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    transition: all 0.05s linear;
    display: block !important;
  }

}

/* Slide up/down animations */
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    transition: all .05s linear;
    display: block !important;
  }
}

//basically extending form control here.
.ui-grid-filter-input,
.ui-grid-filter-select {
  @extend .form-control !optional;
}