index of /home/thefkyzp/hulmvisaadvisor.com/wp-content/plugins/chaty/src/scss/layouts/

File: /home/thefkyzp/hulmvisaadvisor.com/wp-content/plugins/chaty/src/scss/layouts/_chatway.scss
.cloud-images {
  img {
    position: absolute;

    &.cloud-1 {
      top: 5%;
      left: 2%;
      filter: drop-shadow(0px 8.26px 16px rgba(0, 0, 0, 0.12));
    }

    &.cloud-2 {
      bottom: 5%;
      right: 0;
    }

    &.cloud-3 {
      bottom: 1%;
      left: 0;
    }

    &.globe {
      bottom: 0px;
      left: 0;
    }

    &.cloud-5 {
      top: 5%;
      left: 0;
      filter: drop-shadow(0px 8.26px 16px rgba(0, 0, 0, 0.12));
    }
  }
}
.chatyway-popup {
  &[data-step='1'] {
    .cloud-5 {
      display: none;
    }
    .cloud-4 {
      display: none;
    }
    .cloud-2 {
      bottom: 35%;
    }
  }
  &[data-step='2'] {
    img {
      display: none;
    }
  }
  &[data-step='3'] {
    img {
      display: none;
    }
    .cloud-5, .cloud-2 {
      display: block;
    }
  }
}

#chatyway-info-popup {
  .chaty-popup-inner {
    .chatway-steps {
      display: none;
    }
    &.step-1 {
      .cloud-images {
        .cloud-5 {
          display: none;
        }

        .cloud-4 {
          display: none;
        }

        .cloud-2 {
          bottom: 35%;
        }
      }
      .step-1 {
        display: block;
      }
    }
    &.step-2 {
      width: 720px;
      .cloud-images {
        img {
          display: none;
        }
      }
      .step-2 {
        display: block;
      }
    }
    &.step-3 {
      .cloud-images {
        img {
          display: none;
        }

        .cloud-5, .cloud-2 {
          display: block;
        }
      }
      .step-3 {
        display: block;
      }
    }
  }
}
.chatway-position {
  flex: 1;
  input:checked + label {
    border-color: #b78deb;
    img {
      display: block;
    }
  }
}
.chatway-icons {
  label {
    cursor: pointer;
    .chatway-icon {
      height: 40px;
      width: 40px;
      display: block;
      margin-bottom: 10px;
      svg {
        display: block;
        height: 100%;
        width: 100%;
        .color-element {
          fill: #0446de !important;
        }
      }
    }
    .radio-button {
      width: 16px;
      height: 16px;
      display: block;
      margin: 0 auto;
      border-radius: 50%;
      border: 1px solid #83a1b7;
      position: relative;
    }
    input:checked + .radio-button:after {
      display: block;
      width: 8px;
      height: 8px;
      margin: 0 auto;
      position: absolute;
      content: "";
      background: #49687e;
      border-radius: 50%;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.chatway-positions {
  input:checked + label {
    color: #b78deb;
    span {
      border-color: #b78deb;
    }
    &:after {
      content: "";
      width: 8px;
      height: 8px;
      background-color: #b78deb;
      position: absolute;
      border-radius: 50%;
      left: 4px;
    }
  }
}
.chatway-steps {
  .chatway-positions {
    input:checked + label:after {
      display: none;
    }
  }
}
.button-shadow {
  box-shadow: 0 4px 19px 0 rgba(183,141,235,.4);
  transition: all 0.2s ease-in-out;
}
.button-shadow:hover {
  box-shadow: 0 4px 19px 0 rgba(183,141,235,.6);
}
.chaty--button {
  transition: all 0.1s ease-in-out;
  path {
    transition: all 0.1s ease-in-out;
  }
}
.chaty--button.active, .chaty--button.active:hover {
  background-color: #f9f6fd;
  border-color: #b78deb;
  color: #b78deb;
  path {
    stroke: #b78deb;
  }
}
.switch-preview label {
  cursor: pointer;
}

.chatway--options {
  display: flex;
  position: relative;
  gap: 15px;
  align-items: center;
  .chatway--option {
    border: solid 1px #EAEFF2;
    border-radius: 8px;
    flex: 1;
    .chatway--frame {
      margin: 60px 25px 25px 60px;
      position: relative;
      .chatway--base {
        width: 100%;
        height: 100%;
      }
    }
    .view--title {
      display: none;
    }
    .chaty-icon-buttons {
      position: absolute;
      right: 20px;
      bottom: 20px;
      .chaty--cta-icon {
        opacity: 1;
        visibility: visible;
      }
    }
    .chatway--button {
      position: absolute;
      right: 20px;
      bottom: 74px;
      transition-delay: .7s;
      transition-property: transform;
      transition-duration: 0.3s;
    }

    &.old-view {
      &.above-chaty {
        .chaty-icon-buttons {
          .chaty--channel {
            display: none;
          }
        }
      }
      &.inside-chaty {
        .chatway--button {
          bottom: 130px;
        }
        .chaty--channel {
          bottom: 54px;
        }
        .chaty--close-icon {
          opacity: 1;
          visibility: visible;
        }
        .chaty--cta-icon {
          opacity: 0;
          visibility: hidden;
        }
      }
      &.outside-chaty {
        .chatway--frame {
          margin: 42px;
        }
        .chaty-icon-buttons, .chatway--base {
          display: none;
        }
        .chatway--area {
          display: block;
        }
        .chatway--button {
          right: 68px;
          bottom: 68px;
          margin: 0 auto;
        }
      }
    }

    &.new-view {
      &.above-chaty {
        .chaty-icon-buttons {
          .chaty--channel {
            bottom: 0;
          }
        }
      }
      &.inside-chaty {
        .chaty--channel {
          bottom: 0;
        }
      }
      &.outside-chaty {
        .chatway--frame {
          margin: 42px;
        }
        .chaty-icon-buttons, .chatway--base {
          display: none;
        }
        .chatway--area {
          display: block;
        }
        .chatway--button {
          left: 68px;
          bottom: 68px;
          margin: 0 auto;
        }
      }
    }
  }
  .chaty--channel {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 48px;
    transition: 0.2s linear;
  }
  .chat--cta-button {
    width: 48px;
    height: 48ox;
    position: absolute;
    right: 0;
    bottom: 0;
    img {
      position: absolute;
      right: 0;
      bottom: 0;
      transition: 0.2s linear;
    }
  }
  .chatway-arrow {
    flex: 0 0 30px;
    svg {
      width: 100%;
      height: auto;
    }
  }
  .chatway--area {
    display: none;
    width: 100%;
    height: 100%;
  }

  &.above-chaty-inside-chaty {
    .old-view {
      .chatway--button {
        transition: all 0.3s linear;
        transition-delay: 1s;
        &.add-animation {
          right: -310px;
          bottom: 130px;
        }
      }
    }
    .new-view {
      .chaty--channel, .chaty--close-icon, .chaty--cta-icon {
        transition-delay: 0s
      }
    }

    &.animate-it {
      .new-view {
        .chaty--channel {
          bottom: 54px;
        }
        .chaty--cta-icon {
          opacity: 0;
          visibility: hidden;
        }
        .chaty--close-icon {
          transform: rotate(90deg);
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
  &.above-chaty-outside-chaty, &.inside-chaty-outside-chaty {
    .old-view {
      .chatway--button {
        transition: all 0.3s linear;
        transition-delay: 0.3s;
        &.add-animation {
          right: -246px;
          bottom: 80px;
        }
      }
    }
  }
  &.inside-chaty-above-chaty {
    .old-view {
      .chatway--button {
        transition: all 0.3s linear;
        transition-delay: 0.3s;
        &.add-animation {
          right: -310px;
          bottom: 74px;
        }
      }
    }
  }
  &.outside-chaty-above-chaty {
    .old-view {
      .chatway--button {
        transition: all 0.3s linear;
        transition-delay: 0.3s;
        &.add-animation {
          right: -326px;
          bottom: 64px;
        }
      }
    }
  }
  &.outside-chaty-inside-chaty {
    .old-view {
      .chatway--button {
        transition: all 0.3s linear;
        transition-delay: 1s;
        &.add-animation {
          right: -326px;
          bottom: 118px;
        }
      }
    }
    .new-view {
      .chaty--channel, .chaty--close-icon, .chaty--cta-icon {
        transition-delay: 0s
      }
    }

    &.animate-it {
      .new-view {
        .chaty--channel {
          bottom: 54px;
        }
        .chaty--cta-icon {
          opacity: 0;
          visibility: hidden;
        }
        .chaty--close-icon {
          transform: rotate(90deg);
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}
.chatway-custom-image {
  .custom-image-preview {
    display: none;
  }
  &.img-active {
    .custom-image-selector {
      display: none;
    }
    .custom-image-preview {
      display: flex;
    }
  }
}
#chaty-social-Chatway {
  .chatway-outside-setting {
    display: none;
  }
  &.outside-chaty {
    .device-agent-settings, .chatway-channel-setting, .border-t.border-solid {
      display: none;
    }
    .chatway-outside-setting {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .channels__input-box {
      margin-bottom: 0;
    }
    .move-icon {
      display: none;
    }
    .chaty-icon {
      display: none;
    }
    .chatway--buttons {
      padding-left: 70px;
    }
    #chatway-position-settings {
      margin-left: 70px;
    }
  }
}
.chaty-widget-tab {
  .manage-live-chat-info {
    display: none;
  }
  &.has--chatway {
    .add-live-chat-info {
      display: none;
    }
    .manage-live-chat-info {
      display: block;
    }
  }
}