/* *****************************************************************************
*
*  Live chat
*
* ***************************************************************************** */

@keyframes cx-fade-slide-down {
  from {transform: translateY(-2rem); opacity: 0}
}

#vui-body .cx-widget {
  margin: 0; // 1
  font-family: $font-family-base;
  font-size: 1rem;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  text-align: left;
  scrollbar-face-color: #ccc;
  //z-index: 1;

  ::-webkit-scrollbar-thumb {
    -webkit-overflow-scrolling: touch;
  }
  * {
    @include hover-focus {
      outline: none
    }
  }


  // --------------------------------------------
  //  Customize generic UI
  // --------------------------------------------
  label {
    padding-right: 2rem;
    font-size: $h6-font-size;
  }

  .cx-titlebar {
    .cx-title {
      font-family: $font-family-secondary;
      line-height: $headings-line-height;
      font-weight: $font-weight-normal;
      font-size: 1.5rem;
    }
    @include media-breakpoint-down(md) {
      padding-right: 5.25rem;
    }
  }

  .cx-smokescreen {
    opacity: $modal-backdrop-opacity !important;
  }

  .cx-alert {
    top: 1rem;

    .cx-wrapper {
      padding: 1.5rem 2rem;
    }
  }

  .cx-webchat-counter {
    border-radius: 50%;
  }

  .cx-common-container {
    box-shadow: $dropdown-box-shadow;

    .cx-buttons-window-control {
      top: 16px;
      right: 1.5rem;
      .cx-icon.cx-button-close, .cx-icon.cx-button-minimize {
        @supports not (-ms-high-contrast: none) {
          padding-bottom: 1.5rem;
        }
        margin-left: 1rem;
      }

      @include media-breakpoint-down(md) {
        top: 0;
        right: 0;
      }
    }

    .cx-body {
      padding: 1.5rem;

      .cx-button-group {
        margin-top: $spacer-4;
        display: flex;
        justify-content: flex-end;

        .cx-btn:not(:last-of-type) {
          margin-right: $spacer-4
        }
      }
    }

    &.cx-mobile {
      padding-left: 0;
      padding-right: 0;

      .cx-buttons-window-control {
        .cx-icon {
          margin-right: 0;
        }
      }

      .cx-titlebar {
        padding: 1rem 0;
      }
    }
  }

  // Form
  // -----------------------------
  .cx-form-control {
    @include transitions(border-color);
    padding: $input-padding-y $input-padding-x;
    border-radius: $input-border-radius;
    font-size: $h6-font-size;
    line-height: $line-height-base;
    height: inherit !important;
  }

  select.cx-form-control {
    height: 3rem !important;
  }

  // Buttons
  // -----------------------------
  .cx-btn:focus,
  .cx-button-group button:focus {
    border-color: transparent !important;
  }

  .cx-dialog-button .cx-failed-retry {
    margin-right: 0;
  }

  .cx-btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    @include button-size($btn-padding-y, 3rem, $font-size-base, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);

    @include button-variant($primary, $primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: $font-family-secondary;
    font-weight: $font-weight-bold;
    font-size: $form-font-size;
    white-space: normal;
    line-height: 1.5;
    box-shadow: none !important;

    // Disabled comes first so active can properly restyle
    &.cx-disabled {
      opacity: $btn-disabled-opacity;
      @include box-shadow(none);
    }

    // Opinionated: add "hand" cursor to non-disabled .btn elements
    &:not(.cx-disabled) {
      cursor: pointer;
    }

    &:not(.cx-disabled):active,
    &:not(.cx-disabled).active {
      background-image: none;
      @include box-shadow($btn-active-box-shadow);

      &:focus {
        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
      }
    }
  }

  .cx-btn-default {
    //    @extend .link-underline;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: $font-family-secondary;
    font-weight: $font-weight-bold;
    letter-spacing: 1px;
    text-decoration: underline;

    @include hover-focus-active {
      text-decoration: none;
    }

    // .btn-reset
    outline: none;
    background: initial;
    width: initial;
    border: none;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  // modal container
  // -----------------------------
  &.ow-modal {
    width: $modal-lg;
    max-width: 100vw;
    transform: scale(1)!important;
    background: transparent!important;

    &:before {
      content: "";
      background: rgba(51, 51, 51, 0.5);
      width: 150vw;
      height: 110vh;
      position: fixed;
      left: 0;
      top: 0;
      margin: 0;
      transform: translate(-50vw, -10%);
      z-index: 1;
    }

    .cx-overlay {
      @include media-scale(padding, 1rem, 3.5rem 3rem, 4rem 4.5rem);
      @include transitions(transform, opacity);
      max-width: $modal-lg;
      position: relative;
      z-index: 5;
      animation: cx-fade-slide-down $transition-time-long linear;

      .cx-buttons-window-control {
        .cx-button-close {
          @include transitions(opacity);
          padding: $spacer-2;
          margin: $spacer-4;
          opacity: .5;

          @include hover-focus {
            opacity: 1;
          }
        }
      }

      // modal HEADER
      .cx-titlebar {
        .cx-icon {
          @include size(1.4rem);
          margin-top: .5rem;
        }

        .cx-title {
          font-size: $h2-font-size;
          font-family: $font-family-secondary;
          font-weight: $font-weight-normal;
          margin-bottom: $spacer-2;
        }

        .cx-subtitle {
          line-height: $line-height-base;
          font-size: $h6-font-size;
          margin-bottom: $spacer-3;
        }
      }

      // modal BODY
      .cx-body {
        border: none;
      }
    }

    &.cx-mobile {
      .cx-overlay {
        .cx-titlebar {
          .cx-icon {
            margin-left: 0;
          }
        }

        .cx-buttons-window-control {
          .cx-button-close {
            margin: $spacer-3;
          }
        }
      }
    }
  }



  // --------------------------------------------
  // Normalise / customize box UI
  // --------------------------------------------
  .cx-toaster,
  .cx-callback,
  .cx-webchat,
  .cx-send-message {
    @include media-scale(width, 100vw, 60vw, 35vw);

    .cx-form {
      padding: 0;
    }
  }

  //  BOX - DEV console
  // --------------------------------------------
  .cx-console {
    .cx-btn {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .cx-commands-container,
    .cx-events-container {
      h2 {
        margin-bottom: $spacer-3;
      }

      .cx-line > *:not(:last-child) {
        margin-right: $spacer-2;
      }
    }
  }

  //  BOX - Channel selection
  // --------------------------------------------
  .cx-channel-selector {
    .cx-wrapper {
      height: initial;
      min-height: auto;
    }

    .cx-channels {
      @include media-scale(flex-flow, column, row);
      display: flex;
      width: 100%!important;
      justify-content: space-between;

      li {
        @include transitions(background, border-color);
        border-color: $input-border-color;
        border-radius: $input-border-radius;
        border-width: $input-btn-border-width;
        height: initial;
        width: 100%;
        margin-bottom: 0;

        @include hover-focus {
          background: $gray-100;
          border-color: $input-focus-border-color;
        }

        .cx-channel {
          min-height: auto;
          @include hover-focus {
            background-color: transparent;
          }
        }

        .cx-icon {
          @include media-scale(width, 1.5rem, 3rem);
          @include media-scale(height, 1.5rem, 3rem);
          display: flex;

          img {
            width: 100%;
            display: inherit;
            margin: 0 auto;
          }
        }

        .cx-channel-details {
          padding-top: 0;

          .cx-name {
            font-weight: $font-weight-base;
            font-size: 1rem;
          }
        }

        @include media-breakpoint-down(md) {
          margin-bottom: 1rem;
        }
        .cx-channel {
          &:focus {
            border: 1px solid $input-focus-border-color;
          }
        }

      }
    }

    &.cx-mobile {
      .cx-titlebar {
        .cx-title {
          margin-left: 0;
          padding-right: 2.5rem;
        }
        border-bottom: 0;
      }

      .cx-channels {
        li .cx-channel {
          padding: 1.5rem 2rem;

          .cx-channel-details {

            & > * {
              width: auto;
            }
          }
        }
      }

      .cx-body {
        padding: 0!important;
      }
    }
  }

  //  BOX - Before interaction
  // --------------------------------------------
  .cx-toaster {
    .cx-common-container .cx-titlebar .cx-icon {
      width: 24px;
    }

    .cx-button-container {
      padding-bottom: 1.5rem;

      .cx-button-group {
        display: flex;
        justify-content: flex-end;

        .cx-btn {
          &:not(:last-of-type) {
            margin-right: 1rem;
          }
        }
      }
    }
  }

  // BOX - Call
  // --------------------------------------------
  .cx-callback {
    .cx-body {
      .cx-content {
        padding: 0;
      }

      .cx-overlay {
        max-width: 94%;
        border: 1px solid;
        box-shadow: none;
        margin-left: 1rem;
        margin-top: 1rem;
        padding: 1.5rem 2rem;
      }
    }

    .cx-error-container {
      text-align: initial;
    }

    &.cx-mobile {
      &:not(.cx-minimized) {
        //height: 80%!important;
      }

      .cx-transcript {
        //height: inherit!important;
      }
    }
  }

  // BOX - Call Us
  // --------------------------------------------
  .cx-call-us {
    .cx-body {
      border: $border-width solid $border-color!important;
      background: $gray-100;

      .cx-hours {
        color: $gray-700;
      }

      .cx-main-phone {
        .cx-phone-title span,
        .cx-phone-number span {
          font-size: $h3-font-size!important;
        }
      }

      .cx-phone-number {
        a {
          text-decoration: none;
          @include hover-focus {
            text-decoration: underline;
          }
        }
      }

      .cx-alt-phonesy,
      .cx-availability {
        margin-top: $spacer-3;
      }

      .cx-availability {
        max-width: initial;
      }

      .cx-alt-phones {
        & > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .cx-phone-title {
          line-height: 1;
        }

        .cx-phone-number {
          font-size: 1rem;
        }
      }
    }

    &.cx-mobile {
      .cx-alt-phones {
        width: 100%;
      }
    }
  }

  // BOX - WebChat messenger
  // --------------------------------------------
  .cx-webchat {
    &.cx-transcript-view {
      .cx-body {
        padding: 0;
      }
    }

    .cx-transcript {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      font-size: $h6-font-size;

      .cx-message {
        .cx-bubble {
          max-width: 70%;
        }

        &.cx-you .cx-bubble {
          background: $gray-100;
          margin: 0 0 0 auto !important;
        }

        &.cx-system {
          padding: 10px;
          border: $input-border-width solid $input-border-color;
          border-left: 4px solid $primary !important;

          .cx-time {
            font-size: $font-size-base;
          }

          .cx-bubble {
            margin-bottom: 0;
            padding: 10px 15px;
          }
        }

        &.cx-agent-typing {
          .cx-bubble-arrow {
            display: none;
          }

          .cx-bubble {
            background: none !important;
            padding: 0;
          }
        }
      }
    }

    &.cx-mobile {
      &:not(.cx-minimized) {
        //height: 80%!important;
      }

      .cx-transcript {
        //height: inherit!important;
      }
    }
  }

  // BOX - Send messenge
  // --------------------------------------------
  .cx-send-message {
    .cx-body {
      .cx-btn-primary {
        width: auto;
        height: inherit;
      }

      .cx-form-group {
        &.cx-submitForm {
          margin: $spacer-4 0 0;
          display: flex;
          align-items: center;
        }
      }
    }

    &.cx-mobile {
      .cx-buttons-window-control {
        top: 7px;
      }
    }
  }

  // SIDEBAR fixed
  // --------------------------------------------
  &.cx-sidebar {
    box-shadow: $dropdown-box-shadow;
    z-index: $zindex-livechat;

    .cx-sidebar-button {
      border-left: none;
      border-right: none;
      @include hover-focus {
        background: $gray-100;
      }
    }

    &.cx-desktop {
      top: auto;
      bottom: 10rem;
    }
  }

  // Mobile
  // --------------------------------------------
  &.cx-mobile {
    &.cx-sidebar {
      &:not(.cx-common-container) {
        bottom: 8rem;
        right: 10px;
        border-radius: 50%;
      }

      & > .cx-sidebar-button {
        padding: 0.8rem;

        & > .name {
          display: none;
        }
      }

      .cx-body {
        .cx-buttons {
          .cx-sidebar-button {
            padding: 1rem 0;
            border-left: none;
            border-right: none;

            &:last-of-type {
              border-bottom: none;
            }
          }
        }
      }
    }
  }


  // ============================================
  // HIDE genesys mention
  // ============================================
  .cx-branding,
  &.cx-sidebar .cx-common-container,
  &.cx-sidebar > div:last-child:not(.cx-sidebar-button),
  &.cx-sidebar > .cx-sidebar-button:last-child ~ div,
  .cx-footer {
    display: none !important;
  }


  // ============================================
  // Update icons
  // ============================================
  &.cx-mobile.cx-sidebar .cx-sidebar-button {
    &:not(.WebChat):not(.Callback) {
      .cx-icon {
        width: 2rem;
        height: 2rem;
        background: url('#{$path-images}icons/livechat/mobile-livechat.svg') no-repeat;
        background-size: cover;
        svg {
          opacity: 0
        }
      }
    }
  }

  .WebChat .cx-sidebar-button,
  .cx-toaster .cx-titlebar,
  .cx-webchat .cx-titlebar {
    .cx-icon {
      background: url('#{$path-images}icons/livechat/chat.svg') no-repeat;
      background-size: contain;
      background-position: center;
      svg {
        opacity: 0
      }
    }
  }

  &.ow-modal .cx-call-us .cx-titlebar {
    .cx-icon {
      width: 1.7rem !important;
      height: 1.7rem !important;
      background: url('#{$path-images}icons/livechat/call.svg') no-repeat;
      background-size: contain;
      background-position: center;
      margin-top: .7rem;
      svg {
        opacity: 0
      }
    }
  }

  .cx-webchat .cx-titlebar {
    .cx-icon {
      background: url('#{$path-images}icons/livechat/chat.svg') no-repeat;
      background-size: contain;
      background-position: center;
      svg {
        opacity: 0
      }
    }
  }

  .Callback .cx-sidebar-button,
  .cx-callback .cx-titlebar {
    .cx-icon {
      background: url('#{$path-images}icons/livechat/call-incoming.svg') no-repeat;
      background-size: contain;
      background-position: center;
      svg {
        opacity: 0
      }
    }
  }

  .send-message .cx-sidebar-button,
  .cx-send-message .cx-titlebar {
    .cx-icon {
      background: url('#{$path-images}icons/livechat/email.svg') no-repeat;
      background-size: contain;
      background-position: center;
      svg {
        opacity: 0
      }
    }
  }

  .cx-webchat .cx-transcript .cx-message.cx-agent .cx-avatar-wrapper,
  .cx-webchat .cx-transcript .cx-message.cx-agent-typing .cx-avatar-wrapper {
    .cx-avatar {
      background: url('#{$path-images}icons/livechat/livechat-chevron.svg') no-repeat;
      background-size: cover;
      svg {
        opacity: 0
      }
    }
  }

  .cx-overlay {
    .cx-button-close.cx-icon {
      background: url('#{$path-images}icons/livechat/close.svg') no-repeat;
      background-size: contain;
      background-position: center;
      svg {
        opacity: 0
      }
    }
  }
}