homegrade_theme_production/resources/css/components/cta.css

@import '../editor-content/color-taxonomy-scheme.css';

.cta {
  @apply block w-fit my-2 text-base font-bold;
  &:focus-visible {
    @apply outline-primary outline-offset-8;
  }

  &--button {
    @apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit cursor-pointer;
    text-decoration: none !important;
  }
  &--button--mini {
    @apply px-5 py-3;
  }
  &--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;
  }
  &--patrimoine {
    @apply !bg-patrimoine-sante-securite !text-white;
  }
  &--white {
    @apply bg-white text-secondary
    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;
    }
  }
  &--centered {
    @apply mx-auto;
  }

  &--load-more {
    @apply relative;
    &:after {
      filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%)
        contrast(94%);
      content: ' ';
      @apply inline-block ml-2 w-3 h-3;
      background-image: url('../resources/img/graphic-assets/chevron_down.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transform: translateY(1px);
    }
  }
  &--see-all {
    @apply relative;
    &:after {
      filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%)
        contrast(94%);
      content: ' ';
      @apply inline-block ml-2 w-3 h-3;
      background-image: url('../resources/img/graphic-assets/chevron_down.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      rotate: -90deg;
      transform: translateY(1px);
    }
    &:hover:after {
    }
  }
  &--download {
    @apply relative h-16 w-16  shadowed;
    transition: scale 0.3s ease-in-out;

    &:after {
      @apply w-full h-full absolute;
      /* content: url('../resources/img/graphic-assets/icone-external-link.svg'); */
      content: ' ';
      background-image: url('../resources/img/graphic-assets/arrow_download.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 24px;
      height: 24px;
      /* background-color: rgba(0, 0, 0, 0.5); */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &:hover {
      scale: 1.1;
    }
  }

  &.cta--download.cta--white {
    &:hover,
    &:focus-visible {
      @apply bg-secondary text-white;
      &:after {
        filter: invert(99%) sepia(3%) saturate(175%) hue-rotate(283deg) brightness(113%)
          contrast(100%);
      }
    }
  }
  &--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 {
    @apply !no-underline;
    .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);
    }
  }
  &--en-savoir-plus {
    @apply cta--with-arrow-button cta--with-arrow-button;
    @apply w-full flex justify-between items-center;
    &:hover {
      @apply text-secondary;

      .cta_arrow_button {
        @apply filter-secondary;
      }
    }
  }
}

.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);
  }
}