@import "../common/mixins";

.flex-grid {
  
  .group {
  
    &.collapsed {
      .group-title {
        flex: 1;
        border-bottom: 1px solid #ddd;
      
        button {
          transform: rotate(-90deg);
        }
      }
    }
  }
  
  .group-title {
    cursor: pointer;
    display: flex;
    background: #dad8d3;
    border-bottom: 1px solid rgba(0,0,0, 0.08);
    border-left: 1px solid #d4cebf;
    
    @include noselect();
    
    .title {
      align-self: center;
      text-align: center;
      padding: 0;
      padding-bottom: 1px;
    }
    
    button {
      width: 24px;
      height: 24px;
      line-height: 24px;
      transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
      
      &::selection {
        background: transparent;
        color: transparent;
        @include noselect();
      }
      
      &:hover {
        border-radius: 50%;
        background: lightgray;
        transform: scale(0.9);
      }
      
      span {
        line-height: 24px !important;
      }
    }
  }
}