@reference "#styles/assets/tailwind.css";

.js-ce-product-specification {
  .js-product-specification-button {
    @apply transition-all duration-200 ease-in-out;

    &.open {
      @apply text-text-link-default;

      &[data-color='petrol'] {
        @apply bg-petrol;
      }

      &[data-color='grey-light'] {
        @apply bg-grey-light;
      }
    }
  }

  .js-product-specification-content {
    @apply invisible h-0 overflow-hidden opacity-0 transition-all duration-300 ease-in-out;
    transition-delay: 0.3s;

    &.open {
      @apply visible h-auto opacity-100;
    }
  }

  .js-product-specification-product-thumbnail {
    .swiper-slide-thumb-active {
      @apply outline outline-2 -outline-offset-2 outline-turquoise-light;
    }
  }
}