.cta {
  @apply block w-fit my-2 text-base font-bold;
  &--button {
    @apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit cursor-pointer;
  }
  &--circular {
    @apply rounded-full focus:rounded-full aspect-square	w-12 flex items-center justify-center;
    outline-offset: 5px !important;
  }
  &--primary {
    @apply bg-primary text-white
    hover:bg-primary-hover;
  }
  &--secondary {
    @apply bg-secondary text-white
    hover:bg-secondary-hover;
  }

  &--outline {
    @apply border-2 bg-transparent hover:bg-gray;
  }
  /* &--outline-secondary {
    @apply border-secondary border;
  } */
  &--shadowed {
    @apply shadowed;
    &:hover {
      @apply bg-secondary text-white;
    }
  }
  &--streched {
    @apply after:absolute after:inset-0;
  }

  &.cta--button.cta--outline {
    @apply border-black text-black;
  }

  &--read-more {
    @apply flex  text-primary  hover:text-secondary w-full justify-between items-center mt-auto;
  }
  &--with-arrow-button {
    .cta_arrow_button {
      transition: transform 0.3s ease-in-out;
    }
    &:hover .cta_arrow_button {
      filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%)
        contrast(100%);
      transform: translateX(3px);
    }
  }
}

.external-link {
  @apply font-semibold hover:text-secondary flex w-fit items-center;
  &:after {
    @apply ml-2 block;
    content: url('../resources/img/graphic-assets/icone-external-link.svg');
    transform: translateY(1px);
  }
}