.selectable{
  cursor:pointer;
}

:host{
  .overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.05);
    z-index: 4;
  }
  @keyframes slideUp {
    from {height: 0%;overflow-y: hidden;}
    to {height: 61%;overflow-y: hidden;}
  }
  .operators-container {
    height: 61%;
    animation-name: slideUp;
    animation-duration: 0.3s;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 5;
    box-shadow: -1px 3px 10px 0 #bbb;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    .operators-group {
      text-align: center;
      padding: 20px 0 0;
      h5 {
        margin: -7px;
        font-weight: 100;
        font-size: 0.9rem;
        color: #bdbdbd;
        text-align: center;
        padding: 0;
      }
      .operatorOption {
        color: #404040;
        padding: 8px;
        font-size: 0.9rem;
        line-height: 1.6rem;
        display: inline;
        -webkit-transition: ease 0.2s;
        transition: ease 0.2s;
        &.cool{
          color: blue;
        }
        &.hot{
          color: red;
        }
        &:hover{
          background: rgba(0, 0, 0, 0.07);
          color: #07f;
          border-radius: 50%;
        }
        &.selected{
          color: black;
          background: #eee;
          border-radius: 3px;
          padding: 2px 10px;
        }
      }
    }
  }
}




