.button-expand{
  border: 1px solid #d5d5d5;
  border-radius: 16px;
  display: flex;
  height: 30px;
  width: 30px;
  margin: 0 5px;
  position: relative;

  > div{
    align-items: center;
    display: flex;
    margin: 0 auto;

    .icon-attach{
      font-size: 17px;
    }

    i{
      color: #d5d5d5;
      font-size: 16px;
    }

    span{
      display: none;
      font-size: 12px;
      margin-left: 5px;
    }

    .icon-arrow-down{
      display: none;
    }
  }

  .button-expand-popover{
    display: none;
  }
}

.button-expand-opened{
  border-color: rgba(0, 145, 255, 0.62);

  div i{
    color: #0091ff;
  }
  
  &:hover{
    padding: 0 5px;
    width: auto;

    i:nth-child(1){
      margin-left: 3px;
    }
    
    .icon-arrow-down{
      cursor: pointer;
      display: flex;
    }

    span{
      display: flex;
    }

    .info{
      font-weight: 200;
      margin-right: 10px;
    }

    .title{
      font-weight: 600;
    }

    .text{
      font-weight: 200;
    }

    .button-expand-popover{
      display: flex;
    }
  }
}

.button-expand-popover{
  background-color: white;
  border: solid 1px #ececee;
  border-radius: 6px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
  position: absolute;
  right: -72px;
  top: 45px;
  width: 321px;

  &:before{
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    right: 78px;
    top: -6px;
    border-bottom: 6px solid white;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
}

.button-expand-unsend{
  border-color: #ffa6b0;
  >div i{
    color: #d0021b;  
  }

  &:hover{
    padding: 0 10px;
    width: auto;

    span{
      display: flex;
    }

    .title{
      font-weight: 600;
    }

    .text{
      font-weight: 200;
    }
  }
}