@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
@import (reference) "./CriticalBanner.vars.less";

.wds-critical-banner {
  --Prompt-padding: var(--size-16);
  --Prompt-actions-gap: var(--size-8);
  --Prompt-gap: var(--size-10) var(--size-16);
  --Prompt-border-radius: 0;
  container-type: inline-size;

  // Animation variables
  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
  --critical-banner-duration: 150ms;

  &--media-image {
    width: var(--size-48);
    height: var(--size-48);
    object-fit: contain;
  }

  &__title {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    max-height: 192px; // ~8 lines (24px line-height × 8) - balanced for common cases
    overflow: hidden;
    transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
  }

  &--collapsed &__title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 48px; // ~2 lines (24px line-height × 2)
  }

  &__description {
    max-height: 30vh;
    opacity: 1;
    overflow: hidden;
    transition:
      max-height var(--critical-banner-duration) var(--critical-banner-easing),
      opacity var(--critical-banner-duration) var(--critical-banner-easing);
  }

  &--collapsed &__description--with-title {
    max-height: 0;
    opacity: 0;
  }

  // When collapsed WITHOUT a title: show 2 lines
  &--collapsed &__description:not(&__description--with-title) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .wds-prompt__content-wrapper {
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
  }

  &--collapsed .wds-prompt__content-wrapper {
    row-gap: 0;
  }

  &__text-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
    min-width: 0;
    max-width: 480px;
    height: 100%;

    // Padding prevents text shifting when collapsing/expanding layout shift
    padding-top: 3px;

    @media (--screen-400-zoom) {
      padding-top: 0;
    }
    @container (width < @screen-xs-min) {
      padding-top: 0;
    }
  }

  &--collapsed &__title,
  &--collapsed &__description {
    transform: translateY(0);
  }

  &__toggle {
    flex-shrink: 0;
    transition: transform var(--critical-banner-duration) var(--critical-banner-easing);

    &--collapsed {
      transform: rotate(180deg);
    }

    @container (min-width: @wds-critical-banner-collapsible-max) {
      display: none;
    }
  }

  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
     actions only go full-width below mobile-max token (container query) */
  .wds-prompt__actions-wrapper {
    grid-column-start: 2;
    grid-column-end: 3;
    max-height: 200px;
    opacity: 1;
    overflow: visible;

    @container (max-width: @wds-critical-banner-action-wrapper-max) {
      grid-column: span 3;
      width: 100%;

      .wds-Button {
        flex: 1 1 100%;
        width: 100%;
      }
    }
  }

  &--collapsed .wds-prompt__actions-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  &--with-two-actions .wds-prompt__actions-wrapper {
    @container (max-width: @wds-critical-banner-action-wrapper-max) {
      .wds-Button {
        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
        min-width: fit-content;
      }
    }
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .wds-critical-banner__description,
  .wds-critical-banner__title,
  .wds-critical-banner .wds-prompt__content-wrapper,
  .wds-critical-banner__toggle {
    transition: none !important;
  }
}
