@import '../../lib/commonStyles/colors';
$minWidth: 200px;
$maxWidth: 385px;
$minFontSize: 76px;
$maxFontSize: 90px;
$minHeight: 500px;
.root {
  position: relative;
}

.buttonRow {
  text-align: center;
  margin-bottom: 10px;
  height: 25%;
  margin-left: 2%;
  margin-right: 2%;
}

.callButton {
  width: 33.33%;
  padding: 0;
  text {
    font-size: $maxFontSize;
  }
  // fix some view size incoming pad text will overlaps
  @media screen and (max-width: $maxWidth) and (min-width: $minWidth) and (min-height: $minHeight) {
    text {
      font-size: calc(
        #{$minFontSize} + (90 - 76) * ((100vw - #{$maxWidth}) / (385 - 200))
      );
    }
  }
  @media screen and (max-width: $minWidth) {
    text {
      font-size: $minFontSize;
    }
  }
}

.bigCallButton {
  composes: callButton;
  width: 50%;
}

.button {
  circle {
    fill: #ff4646;
  }
  g,
  path {
    fill: #ffffff;
  }
}

.voiceMailButton {
  composes: button;
}

.answerButton {
  composes: button;
  circle {
    fill: $call-btn-color;
  }
}

.answerButtonGroup {
  width: 68%;
  margin-left: auto;
  margin-right: auto;
  height: 26.5%;
}

.multiCallsButtonGroup {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 25%;
}

.forwardContainner {
  display: block;
  width: 60%;
  height: 1px;
  :global .rc-tooltip {
    border: solid 1px #e3e3e3;
    border-radius: 5px;
    opacity: 1;
    width: 79%;
    min-width: 230px;
    background: #fff;
    z-index: 9;
  }
  :global .rc-tooltip-inner {
    padding: 0;
    border: none;
  }
  :global .rc-tooltip-arrow {
    border-top-color: #e3e3e3;
  }
  :global .rc-tooltip-placement-topLeft {
    .rc-tooltip-arrow {
      left: 18%;
    }
  }
}

.replyWithMessageContainner {
  display: block;
  width: 60%;
  height: 1px;
  :global .rc-tooltip {
    z-index: 9;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
    border: solid 1px #e3e3e3;
    border-radius: 0;
    opacity: 1;
    width: 79%;
    min-width: 192px;
    background: #fff;
  }
  :global .rc-tooltip-inner {
    padding: 0;
    border: none;
  }
  :global .rc-tooltip-arrow {
    border-top-color: #e3e3e3;
  }
}