.ts-bubble-border {
  display: inline-block;
  position: relative;
  transition: .6s ease;

  i {
    background-color: var(--color-white);
    position: absolute;
    transition: .2s ease-in;

    &:nth-child(1) {
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
    }
    &:nth-child(2) {
      height: 0%;
      right: 0;
      top: 0;
      width: 3px;
      transition-delay: .2s;
    }
    &:nth-child(3) {
      bottom: 0;
      right: 0;
      height: 3px;
      width: 0%;
      transition-delay: .4s;
    }
    &:nth-child(4) {
      height: 0%;
      left: 0;
      bottom: 0;
      width: 3px;
      transition-delay: .6s;
    }
    &:nth-child(5){
      bottom: 0;
      opacity: 0;
      transition-delay: .6s;
      left: 32px;

      &:after {
        border-style: solid;
        border-width: 10px 10px 0 0;
        border-color: var(--color-white) transparent transparent transparent;
        content: "";
        position: absolute;
      }
    }
  }

  .ts-title-rotate {
    left: 0;
    /*padding: 24px 36px;*/
    position: absolute;
    top: 0;

    span {
      padding: 24px 36px;
      display: inline-block;
      position: absolute;
      transition: .8s ease;
      transition-delay: .3s;
      transform: translateY(-5px) rotate(0.02deg);
      opacity: 0;
      white-space: nowrap;
      &.active {
        opacity: 0;
        transform: translateY(-5px) rotate(0.02deg);
      }
    }
  }

  &.in {
    .ts-title-rotate {
      span {
        &.active {
          opacity: 1;
          transform: translateY(0px) rotate(0.02deg);
        }
        &.out {
          opacity: 0;
          transform: translateY(5px) rotate(0.02deg);
        }
      }
    }
  }

  &.in {
    i {
      &:nth-child(1), &:nth-child(3) {
        width: 100%;
      }
      &:nth-child(2), &:nth-child(4) {
        height: 100%;
      }
      &:nth-child(5) {
        opacity: 1;
      }
    }
  }
}

#ts-content .ts-bubble-border, #ts-footer .ts-bubble-border {
  padding: 24px 36px;
}