@use 'sass:math';

@import '../../lib/commonStyles/full-size';
@import '../../lib/commonStyles/colors.scss';
@import '../../lib/commonStyles/fonts.scss';
@import '../../lib/commonStyles/layout';
$px: 'px';
$userInfoHeight: 134px;
$conferenceAvatarSizeInt: 51;
$conferenceAvatarSize: 51px;
$avaterMerginLeftSizeInt: -20;
$avaterMerginLeftSize: $avaterMerginLeftSizeInt + unquote($px);
$timeCounterMarginTop: 10px;
$timeCounterHeight: 14px;
$calleeAvatarSize: 30px;
$calleeAvatarActiveSize: 45px;
$calleeAvatarMarginL: math.div(
  ($calleeAvatarActiveSize - $calleeAvatarSize),
  2
);

$fontSizeInt: 15;
$fontSize: $fontSizeInt + unquote($px);
$borderWidth: 1px;
$pagePaddingWidth: 48px;

.root {
  @include full-size;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: $snow;
  text-align: center;
}

.panel {
  position: relative;
  height: calc(100% - #{$header-height});
}

.userInfo {
  display: block;
  text-align: center;
  color: $night;
  padding-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  height: $userInfoHeight;
}

.avatarContainer {
  display: inline-block;
}

.avatar {
  width: 65px;
  height: 65px; // border-radius: 33px;
  margin-left: auto;
  margin-right: auto;
  color: $primary-color;
  margin-bottom: 5px;
  overflow: hidden;

  .icon {
    display: block;
    font-size: 65px;
    opacity: 0.3;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.userName {
  @include secondary-font;
  color: $night;
  line-height: 16px;
}

.contactDisplay {
  display: inline-block;
  line-height: 16px;
  margin-top: -5px;
  max-width: calc(100% - #{$pagePaddingWidth});
  vertical-align: bottom;
}

.userPhoneNumber {
  font-size: 12px;
  color: $grey-light;
  margin-top: 2px;
  font-weight: 300;
}

.timeCounter {
  color: $grey-light;
  font-size: 12px;
  font-weight: 300;
  text-align: right;
  padding: 0 24px;
  margin-top: $timeCounterMarginTop;
}

.callPad {
  box-sizing: border-box;
  height: calc(100% - #{$userInfoHeight} - 10px);
  padding-bottom: 50px;
}

.dropdown {
  ul {
    max-height: 90px;
  }
}

.hidden {
  visibility: hidden;
}

.conferenceCallInfoContainer {
  display: block;
  overflow: hidden;
  text-align: center;
  line-height: 1.5;
  font-family: sans-serif;
  height: $userInfoHeight;
  box-sizing: border-box;
  white-space: nowrap;

  .info {
    font-size: $fontSize;
  }

  .avatarContainer {
    padding: 0 $fontSize;
    text-align: center;
    font-size: 0;

    .avatar {
      display: inline-block;
      width: $conferenceAvatarSize;
      height: $conferenceAvatarSize;
      line-height: $conferenceAvatarSize - $borderWidth * 2;
      border-radius: 100%;
      vertical-align: middle;
      padding: 0;
      margin: 0;
      font-size: $fontSize;
      text-align: center;
      position: relative;

      .icon {
        display: block;
        font-size: $conferenceAvatarSize;
        opacity: 0.3;
      }
    }

    .remains {
      color: $snow;
      background-color: $smoke;
      border: $borderWidth solid $snow;
    }

    .avatar + .avatar {
      margin-left: $avaterMerginLeftSize;
    }
  }
}

.mergeInfo {
  min-height: 115px;
  overflow: hidden;
  height: $timeCounterHeight + $timeCounterMarginTop + $userInfoHeight;

  .merge_item {
    height: 30px;
    opacity: 0.8;
    display: flex;
    align-items: center;

    .callee_avatar {
      width: $calleeAvatarSize;
      height: $calleeAvatarSize;
      margin-right: 20px + $calleeAvatarMarginL;
      margin-left: $calleeAvatarMarginL;
      border-radius: 100%;
    }

    .callee_name,
    .last_call_info_load_timeout {
      font-size: 15px;
      letter-spacing: normal;
      color: $ash;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      @media only screen and (max-width: 150px) {
        display: none;
      }

      flex: 1;
      padding-right: 10px;
      text-align: left;
    }

    .callee_status {
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      color: $ash;
      text-align: right;
    }

    .callee_status_disconnected {
      color: $tomato;
    }
  }

  .merge_item_active {
    height: 45px;
    display: flex;
    align-items: center;

    .callee_avatar_active {
      width: $calleeAvatarActiveSize;
      height: $calleeAvatarActiveSize;
      border-radius: 100%;
      margin-right: 20px;
    }

    .callee_name_active {
      font-size: 18px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      letter-spacing: normal;
      color: #303030;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      @media only screen and (max-width: 150px) {
        display: none;
      }

      flex: 1;
      text-align: left;
      padding-right: 10px;
    }

    .callee_status_active {
      text-align: right;
      min-width: 33px;

      .timeCounter {
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: $night;
        margin: 0;
        padding: 0;
      }
    }
  }

  .callee_avatar,
  .callee_avatar_active {
    border-radius: 100%;
  }

  .merge_item,
  .merge_item_active {
    padding: 0 17px 0 20px;

    &:after {
      content: ' ';
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
    }
  }

  > div {
    margin-top: 20px;
  }
}

.clickable {
  cursor: pointer;
}

.last_call_info_load_timeout {
  color: #797979;
  font-style: italic;
}

:export {
  conferenceAvatarSize: $conferenceAvatarSizeInt;
  avatarMerginLeftSize: $avaterMerginLeftSizeInt;
  avatarPaddingSize: $fontSizeInt;
}