.floating-assistant-modal {
  z-index: 100001;
}

.floating-assistant {

  &.portal {
    z-index: 49;
    position: fixed;
    left: 10px;
    bottom: 20px;
    cursor: pointer;
    border-radius: 24px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    height: 48px;
    width: 48px;
    background: var(--theme-block-background);

    transition: width 0.5s, left 0.3s;

    &.AllDone {
      .tick {
        display: block;
      }
    }

    &.Working {
      .loader {
        display: block;
      }
    }

    &.Failed {
      .failed {
        display: flex;
      }
    }

    .failed {
      display: none;
      color: red;
      .iconfont {
        font-size: 48px;
      }
    }

    .tick {
      display: none;
      svg {
        &.drawn {
          .path {
            opacity: 1;
            stroke-dashoffset: 0;
          }
        }
        .circ {
          opacity: 0;
          stroke-dasharray: 130;
          stroke-dashoffset: 130;
          transition: all 1s;
        }
        .tick {
          stroke-dasharray: 50;
          stroke-dashoffset: 50;
          transition: stroke-dashoffset 1s 0.5s ease-out;
        }
      }
    }

    .loader {
      height: 48px;
      width: 48px;
      position: relative;
      display: none;

      span {
        display: block;
        position: absolute;
        top: 0; left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 32px;
        width: 32px;
        color: gray;

        &::before, &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          height: 32px;
          width: 32px;
          border: 2px solid #999;
          border-radius: 50%;
          opacity: 0;
          -webkit-animation: loader-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
          animation: loader-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
        }

        &::after {
          -webkit-animation: loader-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
          animation: loader-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
        }
      }
    }
    @-webkit-keyframes loader-1 {
      0%   { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
      100% { -webkit-transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
    }
    @keyframes loader-1 {
      0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
      100% { transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
    }
    @-webkit-keyframes loader-2 {
      0%   { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
      100% { -webkit-transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
    }
    @keyframes loader-2 {
      0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
      100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
    }
  }
}
