.preview-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(25, 113, 189, 0.4);
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.16);
  border-radius: 4px 0px 0px 4px;
  position: fixed;
  right: 0;
  top: 400px;
  border: none;
  cursor: pointer;
  color: $white-100;
  z-index: 9999;
  transition: 0.3s ease-in-out;

  img {
    margin-bottom: 4px;
  }

  &:hover {
    background-color: $ac-primary;
  }
}

.ac-preview {
  position: fixed;
  width: calc(100% - 90px);
  height: 100%;
  top: 50px;
  right: -100%;
  z-index: 99999;
  transition: 0.3s;

  &.is-active {
    right: 0;

    &.is-not-fixed {
      width: 100%;

      .ac-preview-body {
        padding: 20px 0 0;
      }
    }
  }

  .ac-preview-inner {
    background-color: $white-100;
    border-radius: 10px 0px 0px 10px;
    height: calc(100% - 90px);

    &:after {
      position: absolute;
      content: "";
      left: -90px;
      top: -50px;
      width: calc(100% + 90px);
      height: 100%;
      background-color: $white-100;

      // remove opacity for fix cluster ui project
      // opacity: 0.8;
      z-index: -1;
    }

    .ac-preview-header {
      padding: 20px;
      border-bottom: 1px solid $gray-60;

      h5 {
        font-family: $font-paragraph;
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 28px;

        color: $color-heading;
      }

      .ms-back-button {
        .is-transparent {
          font-family: $font-paragraph;
          font-style: normal;
          font-weight: normal;
          font-size: 16px;
          line-height: 100%;
          color: $gray-80;
          cursor: pointer;

          i.fa {
            color: $gray-80;
            padding-left: 5px;
          }
        }
      }
    }

    .ac-preview-body {
      display: flex;
      margin-top: 10px;
      padding: 20px;

      .left-content {
        width: 250px;
        margin-right: 15px;

        .ac-files {
          ul {
            li {
              &.is-active {
                a {
                  background-color: $ac-primary;
                  border-radius: 5px;
                  color: $white-100;
                  padding: 10px 10px;
                  margin-left: -10px;
                  border-top: 1px solid transparent;

                  span {
                    img {
                      filter: brightness(100);
                    }
                  }
                }

                &:last-child {
                  &.is-active {
                    a {
                      border-top: 1px solid transparent;
                    }
                  }
                }
              }

              a {
                padding: 10px 0px;
                display: flex;
                font-family: $font-paragraph;
                font-style: normal;
                font-weight: 500;
                font-size: 14px;
                line-height: 100%;
                color: $color-heading;
                border-top: 1px solid $color-border;

                span {
                  img {
                    margin-right: 5px;
                    height: 13px;
                  }
                }
              }

              &:last-child {
                a {
                  border-bottom: 1px solid $color-border;
                }
              }
            }
          }
        }
      }

      .right-content {
        width: 100%;

        .code-preview {
          background-color: $color-border;
          border-radius: 4px;
          display: flex;

          .code-left {
            width: 50%;
          }

          .code-right {
            width: 50%;
          }
        }
      }
    }
  }
}
.left-content {
  .ac-files {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
    span {
      width: 20px;
      white-space: nowrap;
    }
  }
}