@import "./../styles/index.scss";

.control-container{
  align-items: center;
  display: flex;
  height: 60px;
  margin: 0 20px;
  width: calc(100% - 40px);

  >div{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
  }
}

button.button-send{
  i{
    margin-right: 5px;
    top: 1px;
  }

  span{
    font-size: 12px;
    font-weight: 500;
    top: -2px;
  }
}

.button-send{
  background-color: #0091ff;
  padding: 0 12px 0 9px;
  transition: width 0.5s;
  // width: 90px;

  &[disabled]{
    opacity: 0.5;
    pointer-events: none;
  }

  >div{
    color: white;
  }
  
  .loading {
    height: 31px;
    margin: 0 auto;
    position:relative;
    width: 31px;

    > div {
      background-color:#FFFFFF;
      height: 5px;
      position:absolute;
      width: 2px;
      border-radius:2px;
      -webkit-transform:scale(0.4);
      -webkit-animation-name:loading;
      -webkit-animation-duration:1.04s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-direction:linear;
    }

    > div:nth-child(1) {
      left: 7px;
      top: 13px;
      -webkit-transform:rotate(-90deg);
      -webkit-animation-delay:0.39s;
    }

    > div:nth-child(2) {
      left: 9px;
      top: 7px;
      -webkit-transform:rotate(-45deg);
      -webkit-animation-delay:0.52s;
    }

    > div:nth-child(3) {
      left: 15px;
      top: 5px;
      -webkit-transform:rotate(0deg);
      -webkit-animation-delay:0.65s;
    }

    > div:nth-child(4) {
      right: 8px;
      top: 7px;
      -webkit-transform:rotate(45deg);
      -webkit-animation-delay:0.78s;
    }

    > div:nth-child(5) {
      right: 7px;
      top: 13px;
      -webkit-transform:rotate(90deg);
      -webkit-animation-delay:0.91s;
    }

    > div:nth-child(6) {
      right: 8px;
      bottom: 7px;
      -webkit-transform:rotate(135deg);
      -webkit-animation-delay:1.04s;
    }

    > div:nth-child(7) {
      bottom: 5px;
      left: 15px;
      -webkit-transform:rotate(180deg);
      -webkit-animation-delay:1.17s;
    }

    > div:nth-child(8) {
      left: 9px;
      bottom: 7px;
      -webkit-transform:rotate(-135deg);
      -webkit-animation-delay:1.3s;
    }
  }
}

@-webkit-keyframes loading {
  0%{ background-color:#fff }
  100%{ background-color:#0091ff }
}

.button-send-loading{
  padding: 0;
  width: 31px;
}

.buttons-container{
  display: flex;
  flex-direction: row;
}

.button-editor{
  cursor: pointer;
  padding: 0 10px;

  label{
    cursor: inherit;
  }

  i{
    font-size: 18px;
  }
}

.button-editor-border-left{
  border-left: 1px solid transparent;
}

.button-editor-border-right{
  border-right: 1px solid transparent;
}

.hide-file-input {
  display: none;
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN, $_BORDER_COLOR_SEPARATE, $_COLOR_ICON_BUTTON){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .control-container{
      background-color: $_BACKGROUND_COLOR_MAIN;
    }

    .button-editor{
      i{
        color: $_COLOR_ICON_BUTTON;
      }
    }

    .button-editor-border-left{
      border-left-color: $_BORDER_COLOR_SEPARATE;
    }
    
    .button-editor-border-right{
      border-right-color: $_BORDER_COLOR_SEPARATE;
    }

  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_MAIN_LIGHT, $_BORDER_COLOR_SEPARATE_LIGHT, $_COLOR_ICON_BUTTON_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_DARK, $_BORDER_COLOR_SEPARATE_DARK, $_COLOR_ICON_BUTTON_DARK);