@import "placeholders";
@import "functions";

$dark-blue: #0080e5;

@if not variable-exists(color-main) {
  $color-main: $dark-blue;
}
@if not variable-exists(gap) {
  $gap: 10px;
}
@if not variable-exists(servicebar-width) {
  $servicebar-width: 10px;
}
@if not variable-exists(border-radius) {
  $border-radius: 3px;
}

.easyim {
  &__wrapper {
    &--hidden {
      display: none;
    }
  }

  &__container {
    position: fixed;
    bottom: 70px;
    right: $servicebar-width + $gap;
    width: 340px;
    @include box-shadow(0 0 17px rgba(102, 129, 154, 0.4));
    @extend %border-radius;
    z-index: z($z-priority, servicebar) + 1;
  }

  &__header {
    @extend %flex;
    @extend %align-items-center;
    position: relative;
    height: 50px;
    background: $color-main;
    padding-top: 2px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    @include box-shadow(0 0 6px grey);
    z-index: 1;
  }

  &__body {
    position: relative;
    height: 450px;
    background: white;
    overflow-y: auto;
  }

  &__search-wrapper {
    height: 100%;
  }

  &__item {
    @extend %box-sizing-border-box;
    @extend %flex;
    @extend %align-items-center;
    position: relative;
    width: 100%;

    &--padded {
      padding: 11px 10px;
    }

    &__pre {
      @extend %flex-shrink-0;
      @extend %flex-grow-0;
      @include flex-basis(40px);

      &--smaller {
        @include flex-basis(32px);
      }
    }

    &__content {
      position: relative;
      @extend %flex-grow-1;
      overflow: hidden;
    }

    ul {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &__search-input {
    all: unset!important;
    display: inline-block;
    vertical-align: middle;
    background: transparent!important;
    border: none !important;
    outline: none;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    color: placeholder-color($color-main)!important;
    margin-left: 4px;
    width: auto !important;

    &::-webkit-input-placeholder {
      color: placeholder-color($color-main)!important;
      opacity: .85;
    }

    &:-moz-placeholder {
      color: placeholder-color($color-main)!important;
      opacity: .85;
    }

    &::-moz-placeholder {
      color: placeholder-color($color-main)!important;
      opacity: .85;
    }

    &:-ms-input-placeholder {
      color: placeholder-color($color-main)!important;
      opacity: .85;
    }
  }

  &__search-btn {
    @extend %reset-button;
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    opacity: 0.8;
    float: right;

    img {
      width: 100%;
    }
  }

  &__avatar {
    display: inline-block;
    width: 32px;

    .avatar-container {
      margin-left: 0;
      margin-right: 0;
    }

    img {
      width: 100%;
      @extend %border-radius-infinite;
      padding: 0;
      border: none;
    }
  }

  &__back-btn {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    height: 32px;
    text-align: center;
    @extend %border-radius;
    @include transition(0.2s background ease-out);

    &:hover {
      background: rgba(black, 0.075);
    }

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%, -50%) scale(.75));
      width: 90%;
    }
  }

  &__overview {
    padding: 11px 10px;
    border-bottom: 1px solid darken(whitesmoke, 5%);

    &__content {
      margin-left: 6px;
      margin-right: 6px;
    }

    &__title-wrapper {
      margin-top: 2px;
      margin-bottom: 3px;

      &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: "";
        clear: both;
        height: 0;
      }
    }

    &__title {
      float: left;
      margin: 0;
      padding: 0;
      border: none;
      font-size: 14px;
      font-weight: 400;
      color: darken(grey, 15%);

      a {
        color: inherit;
      }
    }

    &__timestamp {
      font-size: 11px;
      float: right;
    }

    &__subtitle {
      position: relative;
      width: 100%;
      margin: 0;
      font-size: 12px;
      white-space: nowrap;
      color: grey;
    }

    &__last-message {
      overflow: hidden;
      text-overflow: ellipsis;

      a {
        position: relative;
        z-index: 3; // one more than overlay
      }

      p {
        margin: 0;
      }
    }

    &__unread-count {
      float: right;
      min-width: 11px;
      padding-left: 4px;
      padding-right: 4px;
      height: 17px;
      @extend %border-radius-infinite;
      background: #24d066;
      color: white;
      text-align: center;
      font-size: 100%;
      line-height: 150%;
    }
  }

  &__conversation {
    position: relative;
    @extend %box-sizing-border-box;
    height: 100%;
    padding-bottom: 50px;

    &__messages {
      @extend %box-sizing-border-box;
      padding: 9px 3px;
      height: 100%;
      background: ghostwhite;
      overflow-y: auto;

      overflow-wrap: break-word;
      word-wrap: break-word;
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    &__submit-form {
      position: absolute;
      bottom: 0;
      left: 0;
      //height: 50px;
      width: 100%;
      background: white;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
    }
  }

  &__message {
    @extend %flex;
    @extend %align-items-flex-end;
    margin-bottom: 5px;
    margin-right: 19px;

    &.mine {
      @extend %flex-direction-row-rewerse;
      margin-left: 19px;
      margin-right: 0;
    }

    &__avatar {
      @extend %flex-grow-0;
      @extend %flex-shrink-0;
      @include flex-basis(14px);
      padding-right: 2.5px;
      padding-left: 2.5px;
      padding-bottom: 1.5px;

      &--hidden {
        visibility: hidden;
      }
    }

    &__content-wrapper {
      position: relative;
    }

    &__content {
      @extend %box-sizing-border-box;
      @extend %border-radius;//@include border-radius(3px);
      display: inline-block;
      padding: 6px 8px;
      color: white;
      background-color: $color-main;
      font-size: 13px;
      line-height: 1.3;
      min-width: 100%;

      a {
        color: inherit;
        text-decoration: underline;
      }

      p {
        margin: 0;
      }

      &::-moz-selection {
        color: white;
        background: darken($color-main, 10%);
      }

      &::selection {
        color: white;
        background: darken($color-main, 10%);
      }

      &--grey {
        background-color: lighten(lightgrey, 5%);
        color: darken(darkgrey, 20%);
      }
    }

    &__timestamp {
      margin-top: 2px;
      font-size: 10px;
      color: rgba(black, 0.35);

      &--right {
        text-align: right;
      }
    }
  }

  &__contact {
    @extend %flex;
    @extend %align-items-center;
    position: relative;
    padding: 5px;
    color: white;
    border-bottom: 1px solid darken(whitesmoke, 5%);

    &:last-child,
    &:only-child {
      border-bottom: none;
    }

    &--dark {
      color: #333333;
    }

    &__name {
      @extend %flex-grow-1;
      font-size: 14px;
      font-weight: 400;
      color: inherit;
      margin: 0;
      margin-left: 10px;
      padding: 0;

      a {
        color: inherit;
      }

      * {
        color: inherit;
      }
    }

    &__history {
      position: relative;
      color: inherit;
      z-index: 3; // one more than link overlay
      width: 16px;
      margin-left: 5px;
      padding: 3px;
      @extend %border-radius;//@include border-radius(3px);
      text-align: center;
      background: rgba($color-main, 0.2);
      float: right;

      &:hover {
        background: rgba(black, 0.075);
      }
    }
  }

  &__submit-form {
    @extend %reset-margin;
    @extend %reset-padding;
    @extend %reset-border;

    box-sizing: border-box;
    display: block;

    &__textarea {
      $line-height: 14px;
      @extend %reset-text;
      box-sizing: border-box;
      margin: 0;
      padding: 1.5*$gap 40px 1.5*$gap $gap;
      border: 0;
      font-family: inherit;
      resize: none;
      outline: none;
      background: transparent;
      min-height: 3*$gap + $line-height;
      max-height: 150px;
      width: 100%;
      font-size: 12px;
      line-height: $line-height;
    }

    &__submit-btn {
      @extend %reset-button;
      padding: 0;
      margin: 0;
      width: 18px;
      opacity: 0.5;

      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);

      &:hover {
        opacity: .75;
        cursor: pointer;
      }

      img {
        width: 100%;
      }
    }
  }

  &__overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: 0.3s ease background;

    &:hover {
      background: rgba(black, 0.05);
    }
  }

  &__top-close {
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    width: 17px;
    height: 14px;
    background: rgba(black, 0.1);
    z-index: 2;

    &:hover {
      cursor: pointer;
      background: rgba(black, 0.2);
    }

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-height: 90%;
    }
  }

  &__redmine-toggle {
    position: fixed;
    right: 50px;
    bottom: 10px;
    height: 50px;
    width: 50px;
    border-radius: 999em;
    background: $color-main;
    transition: 0.2s ease box-shadow, 0.2s ease background-image;
    background-image: url('../images/chat-bubble.svg');
    background-color: $color-main;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: z($z-priority, servicebar) + 1;

    &.active {
      background-image: url('../images/close.svg');
      box-shadow: 0 0 50px rgba(black, 0.3);
    }

    .sign {
      position: absolute;
      top: 25%;
      left: 25%;
      transform: translate(-75%, -75%);
      background: red;
      padding: 2px 6px;
      border-radius: 999em;
      color: white;
    }
  }
}
