@import "../common/_mixins";

$hover-color: #f5f5f5;

.flex-grid {
  
  .group.shown {
    &.collapsed {
      .row {
        display: none;
      }
    }
  }
  
  .row {
    text-align: center;
    display: flex;
    
    //height: 25px;
    
    &:hover {
      background-color: $hover-color;
      // transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    &.hidden {
      display: none;
    }
    
    &.selected {
      background-color: darken(#f2f2f2, 2);
      
      &:hover {
        background-color: darken(darken(#f2f2f2, 2), 2);
      }
      
      &.first > * {
        border-top: 1px solid #a9a8a8;
      }
      
      &.last > * {
        border-bottom: 1px solid #bfbebe;
      }
      
      .selection-mark {
        background: #ff7949;
      }
    }
  
    .selection-mark {
      width: 3px;
      min-width: 3px;
      background: #d5d5d5;
    }
  }
}