@import "../../common/_mixins";

.flex-grid {
  
  .cell {
    &.read-only {
      .type-toggle {
        color: #6D6D6D;
      }
    }
  }
  
  .type-toggle {
    height: 100%;
    overflow: hidden;
    position: relative;
    
    width: 100%;
    background: linear-gradient(#f1f0f0, #DEDEDE);
    
    @include noselect();
    
    &:hover:not(.read-only) {
      background: linear-gradient(#f1f1f1, #bbb9b9);
    }
    
    &.toggled {
      background: linear-gradient(#9BA7B8, #A5B4C9);
      
      &:hover {
        background: linear-gradient(#9BA7B8, #7c8796, #A5B4C9)
      }
    }
    
    div {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}