@layer components {
  [class*="ribbon-wrapper"] {
    @apply relative pt-[58px] pb-7 px-[18px];
  }
  .ribbon {
    @apply h-[30px] leading-[30px] clear-left absolute text-[rgba(var(--white),1)] z-[2] px-5 py-0 left-0 top-3;
  }
  .ribbon-clip {
    @apply -left-3.5 before:absolute before:content-[""] before:border-t-[rgba(var(--dark-color),1)] before:border-r-[rgba(var(--dark-color),1)] before:border-[7px] before:border-solid before:border-transparent before:left-0 before:top-[30px];
    &:before {
      @apply w-[0px] h-[0px];
    }
  }
  .ribbon-vertical-left-wrapper {
    @apply relative pl-10;
  }
  .ribbon-vertical-right-wrapper {
    @apply pr-10;
  }
  .ribbon-wrapper-bottom {
    @apply pt-0 pb-10;
  }
  .ribbon-wrapper-right-bottom {
    @apply pr-10;
  }
  .ribbon-space-bottom {
    @apply top-0;
  }
  .ribbon-bookmark {
    &:before {
      @apply absolute block content-[''] border-[rgba(var(--dark-color),1)] border-r-[10px] border-r-transparent border-[15px] border-solid left-full top-0 w-[0px] h-[0px];
    }
  }
  .ribbon-right {
    @apply left-auto -right-0.5;
  }
  .ribbon-clip-right {
    @apply -right-3.5;
    &:before {
      @apply absolute content-[""] border-t-[rgba(var(--dark-color),1)] border-r-[rgba(var(--dark-color),1)] border-[7px] border-solid border-transparent right-0 top-[30px] w-[0px] h-[0px];
    }
  }
  .ribbon-clip-bottom {
    @apply -left-3.5 top-auto bottom-3;
    &:before {
      @apply absolute content-[""] border-t-[rgba(var(--dark-color),1)] border-r-[rgba(var(--dark-color),1)] border-[7px] border-solid border-transparent left-0 bottom-[30px] w-[0px] h-[0px];
    }
  }
  .ribbon-clip-bottom-right {
    @apply left-auto -right-3.5 top-auto bottom-3;
    &:before {
      @apply absolute content-[""] border-t-[rgba(var(--dark-color),1)] border-r-[rgba(var(--dark-color),1)] border-[7px] border-solid border-transparent right-0 bottom-[30px] w-[0px] h-[0px];
    }
  }
  .ribbon-bookmark.ribbon-right:before {
    @apply border-r-[rgba(var(--dark-color),1)] border-l-[10px] border-l-transparent border-r-[15px] border-solid left-auto right-full;
  }
  .ribbon-vertical-left {
    @apply clear-none leading-[70px] text-center px-[5px] py-0 left-3 -top-0.5 w-[30px] h-[70px];
  }
  .ribbon-vertical-right {
    @apply clear-none leading-[70px] text-center px-[5px] py-0 left-auto right-5 -top-0.5 w-[30px] h-[70px];
  }
  .ribbon-bookmark {
    &.ribbon-vertical-left:before,
    &.ribbon-vertical-right:before {
      @apply border-r-[rgba(var(--dark-color)),1] -mt-3.5 border-r-[15px] border-b-[10px] border-b-transparent border-solid left-0 top-full;
    }
  }
  .vertical-lp-space {
    @apply pl-[50px] pr-7 pt-[58px] pb-7;
  }
  .vertical-rp-space {
    @apply pl-7 pr-[50px] pt-[58px] pb-7;
  }
  .clip-bp-space {
    @apply pt-7 pb-[58px] px-[18px];
  }
  .ribbon-wrapper {
    @apply translate-x-[20deg];
  }
  .animated-ribbon {
    @apply relative;
    .box {
      @apply w-full -translate-x-2/4 translate-y-2/4 shadow-[0_0_4px_rgba(var(--black),0.1)] relative left-2/4 top-2/4;
      perspective: 50px;
      .ribbon {
        @apply absolute right-[-21px] h-[60px] leading-[2.2] bottom-2.5;
        transform-style: preserve-3d;
        i {
          @apply absolute block transition-all duration-[0.2s] ease-[ease-in] bottom-0;
          &.back {
            @apply w-0 h-9 skew-y-[-30deg] bg-[rgba(var(--theme-default),1)] origin-[0%_100%] delay-[0.45s] left-full;
          }
          &.front {
            @apply w-0 h-9 bg-[rgba(var(--theme-default),1)] delay-[0.35s] -right-2.5 bottom-[11px];
          }
          &.fold {
            @apply h-10 w-0 origin-[100%_0%] delay-[0.15s] right-[180px] bottom-[11px] bg-[rgba(var(--theme-default),1)];
            transform: rotateY(-45deg) skewY(-40deg);
          }
          &.foldback {
            @apply w-0 h-[29px] delay-[0s] right-[200px] bottom-4 bg-[rgba(var(--theme-default),1)];
          }
          span {
            @apply absolute opacity-0 text-[rgba(var(--white),1)] text-center transition-all duration-[0.4s] ease-[ease-out] px-[38px] py-[3px];
          }
        }
      }
    }
    &:hover {
      .ribbon {
        i {
          &.back {
            @apply w-2.5 delay-[0s];
          }
          &.front {
            @apply w-[145px] delay-[0.15s];
          }
          span {
            @apply opacity-100 delay-[0.2s];
          }
        }
      }
    }
  }
  .smooth-animate {
    &:hover {
      .label {
        @apply pl-[1em];
      }
    }
    .media-image {
      @apply inline-block w-auto relative;
      img {
        @apply block;
      }
    }
    .label {
      @apply absolute top-[-132px] inline-block uppercase tracking-widest leading-[2.35em] font-[bold] text-[rgba(var(--white),1)] bg-[rgba(var(--danger-color),1)] z-[7] shadow-[0px_2px_0_rgba(var(--dark-color),0.1)] transition-all duration-[0.1s] px-[0.75em] py-0 rounded-[5px_2px_2px_0px] -left-6 before:content-["_"] before:block before:absolute before:bg-[rgba(var(--danger-color),1)] before:left-0 before:-bottom-1 after:content-["_"] after:block after:absolute after:bg-[rgba(var(--danger-color),1)] after:rounded-[5px_0_0_5px] after:left-0 after:-bottom-1.5;
      &:before {
        @apply w-[5px] h-[4px];
      }
      &:after {
        @apply w-[5px] h-[6px];
      }
    }
  }
  .vertical-left-animate {
    .ribbon-wrapper {
      @apply overflow-hidden;
      .ribbon {
        @apply left-[-50px] transition-all duration-[0.2s] ease-[ease];
        i {
          @apply ml-3;
        }
        span {
          @apply opacity-0 transition-all duration-[0.2s] ease-[ease];
        }
      }
      .ribbon-bookmark {
        &::before {
          @apply left-[84%];
        }
      }
    }
    &:hover {
      .ribbon-wrapper {
        .ribbon {
          @apply transition-all duration-[0.2s] ease-[ease] left-0;
          span {
            @apply opacity-100 transition-all duration-[0.2s] ease-[ease];
          }
        }
      }
    }
  }
  .triangular-ribbon {
    @apply transition-all duration-[0.3s] ease-[ease] hover:transition-all hover:duration-[0.3s] hover:ease-[ease];
    .ribbon-wrapper {
      @apply overflow-hidden;
      .triangular-ribbon-box {
        @apply absolute top-[-50px] left-[-50px] rotate-[315deg] w-[100px] h-[100px] bg-[rgba(var(--light-primary),1)] text-center border-[rgba(var(--theme-default),1)] transition-all duration-[0.3s] ease-[ease] opacity-0 border-[3px] border-solid flex justify-center items-end;
        > div {
          @apply absolute left-9 -bottom-0.5;
          svg {
            @apply stroke-[rgba(var(--theme-default),1)] w-[20px] h-[20px];
          }
        }
      }
    }
    &:hover {
      .triangular-ribbon-box {
        @apply opacity-100 transition-all duration-[0.3s] ease-[ease];
      }
    }
  }
  .vertical-ribbon-animate {
    &:hover {
      .ribbon-vertical-right {
        animation: shrink 0.3s ease;
      }
    }
    .ribbon-vertical-right {
      @apply w-[115px] leading-[45px] h-[45px] shadow-[0px_8px_16px_-4px_rgba(var(--black),0.25)] rounded-[0_0_50%_50%] top-0 before:content-[unset];
      > div {
        i {
          @apply mr-1.5;
        }
      }
    }
    .ribbon-bottom-arrow {
      @apply absolute leading-10 top-[calc(-1*12px)] rounded-none border-l-[12px] border-l-[#0005] border-b-[14px] border-b-[#0000] border-solid left-[38px];
      clip-path: polygon(
        12px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(50% + 12px / 2) 100%,
        12px calc(100% - 14px),
        12px 12px,
        0 12px
      );
    }
  }
  @keyframes shrink {
    0% {
      transform: translateX(0em);
    }

    50% {
      transform: translateX(-1em);
    }
  }
}