.block-etablissements {

  .loader {
    @apply block size-8 text-xl rounded-full;
    border-top: .2em solid var(--color-pink);
    border-left: .2em solid var(--color-pink);
    border-bottom: .2em solid var(--color-pink);
    border-right: .2em solid transparent;
    animation: loader-loading 1200ms linear infinite;
  }

  .column-map {
    #mapContainer {
      .leaflet-popup {
        h3 {
          strong {
            @apply block;
          }
        }
      }
    }
  }

  .column-etablissements {
    .swiper-etablissement {
      display: flex!important;
      justify-content: center!important;
      align-items: center!important;

      .swiper-slide {
        @apply p-3! px-4!;

        &:nth-child(4n + 1) {
          @apply pbs-0!;
        }
        &:nth-child(4n) {
          @apply pbe-10!;
        }
      }
    }

    .swiper-control-container {
      @apply w-full h-auto py-3 flex gap-6 justify-center items-center rounded-none bg-white;

      .swiper-pagination {
        position: initial;
        @apply w-auto font-bold;
      }

      .swiper-button-prev,
      .swiper-button-next {
        position: initial;
        @apply w-11 h-11 mt-0;
        color: var(--color-pink);

        &:before{
          display: none !important;
        }
      }
    }
  }
}

.card-etablissement-horizontal {
  @apply h-full flex items-center rounded-2xl border-2 border-fog bg-white overflow-hidden;
  box-shadow: 0 76px 21px 0 rgba(0, 0, 0, 0.00), 0 49px 20px 0 rgba(0, 0, 0, 0.01), 0 28px 17px 0 rgba(0, 0, 0, 0.02), 0 12px 12px 0 rgba(0, 0, 0, 0.04), 0 3px 7px 0 rgba(0, 0, 0, 0.05);

  @media screen and (max-width: 500px) {
    @apply mb-5 flex-col;
  }

  &.is-active,
  &:hover {
    @apply border-pink bg-pink/5;

    .selected-marker {
      @apply opacity-100;
    }
  }

  &:active {
    @apply border-[#2B0012]! bg-[#F4D5DE]!;
  }


  &:focus-visible {
    @apply bg-[#2032FF]/15 border-[#2032FF];
  }

  .selected-marker {
    @apply opacity-0 bottom-2.5 right-2.5;
  }

  .post-link-content {
    @apply w-full p-6;

    @media screen and (max-width: 500px) {
      @apply w-full min-h-39.5 p-6;
    }

    transition: all 0.3s ease-in-out;

    .post-title {
      @apply mb-6 text-2xl;

      strong {
        @apply block;
      }
    }

    .post-content {
      @apply text-base text-smoke;

      .meta-line {
        @apply gap-2;
      }
    }
  }

  .post-navigation {
    @apply mr-10;

    .post-icon {
      @apply block w-8 aspect-square bg-pink;
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0LWljb24gbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=");
      mask-repeat: no-repeat;
      mask-size: cover;
    }
  }


  @media screen and (max-width: 500px) {
    .post-thumbnail {
      @apply h-45.25;

      img {
        @apply w-full h-full object-cover object-center;
      }
    }
  }

  .icon-item {
    @apply grow-0 shrink-0 w-[1em] h-[1em] aspect-square inline-block mask-contain mask-center mask-no-repeat pointer-events-none;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    transition: background-color 0.25s cubic-bezier(0.33, 1, 0.68, 1);

    &.icon-marker {
      @apply mask-[url('/assets/images/icons/marker.svg')];
    }

    &.icon-phone {
      @apply mask-[url('/assets/images/icons/phone.svg')];
    }
  }
}

@keyframes loader-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}