// @file CSS styles for composite toolbar control
// @copyright Digital Living Software Corp. 2014-2016

.pip-composite-toolbar {
  //width: 100%;
  display: block;
  background-color: #f3f3f3!important;
  width: 100%;
  height: 48px;
  justify-content: space-around;

  .pip-composite-button{
    height: 48px !important;
    font-size: 24px  !important;
    margin: 0px!important;
  }

  .icon-text-block {
    color: rgb(117, 117, 117);
  }

  .icon-checkbox-on {
    color: #CB7E99;
  }

  .icon-location {
    color: #F9B257;
  }

  .icon-document {
    color: #8CC475;
  }

  .icon-camera {
    color: #4EBFD9;
  }

  .icon-time {
    color: #0099FF;
  }

  /* pip-composite-button  && animation */
  .pip-composite-button{
    flex: 1;
    transition: all 0.5s linear;
  }

  .new-item
  {
    flex: .00001!important;
    -webkit-animation: flexGrow 500ms ease forwards;
    -o-animation: flexGrow 500ms ease forwards;
    animation: flexGrow 500ms ease forwards;
  }

  .remove-item
  {
    flex: 1!important;
    -webkit-animation: flexShrink 500ms ease forwards;
    -o-animation: flexShrink 500ms ease forwards;
    animation: flexShrink 500ms ease forwards;
  }

  @-webkit-keyframes flexGrow {
    from {
      flex: .00001;
    }
    to {
      flex: 1!important;
    }
  }
  @-o-keyframes flexGrow {
    from {
      flex: .00001;
    }
    to {
      flex: 1!important;
    }
  }
  @keyframes flexGrow {
    from {
      flex: .00001;
    }
    to {
      flex: 1!important;
    }
  }

  @-webkit-keyframes flexShrink {
    from {
      flex: 1;
    }
    to {
      flex: .01!important;
      flex: .00001!important;
      width: 0px!important;
      min-width: 0px!important;
      padding: 0px!important;
    }
  }

  @-o-keyframes flexShrink {
    from {
      flex: 1;
    }
    to {
      flex: .01!important;
      flex: .00001!important;
      width: 0px!important;
      min-width: 0px!important;
      padding: 0px!important;
    }
  }

  @keyframes flexShrink {
    from {
      flex: 1;
    }
    to {
      flex: .01!important;
      flex: .00001!important;
      width: 0px!important;
      min-width: 0px!important;
      padding: 0px!important;
    }
  }
}