/**
 * @license
 *
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/motion';

$prefix: 'clabs--animated-header__ai-tile' !default;

.#{$prefix} {
  position: relative;
  display: flex;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  min-block-size: 192px;
  text-decoration: none;
}

.#{$prefix}[aria-disabled='true'] {
  outline: none;

  * {
    color: $text-disabled;
    fill: $text-disabled;
    pointer-events: none;
  }
}

.#{$prefix}:hover,
.#{$prefix}:active,
.#{$prefix}:focus {
  text-decoration: none;
}

.#{$prefix}--body {
  position: relative;
  z-index: 0;
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: $spacing-05;
  background-color: transparent;
  color: $text-primary;

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity 500ms linear;
  }

  &[data-expanded='true'] {
    opacity: 1;
    transition-delay: 110ms;
  }

  &[data-expanded='false'] {
    opacity: 0;
    transition-delay: 0ms;
  }
}

/* Semi-transparent background layer */
.#{$prefix}--body-background {
  position: absolute;
  z-index: 1;
  background-color: $layer-01;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 150ms motion.motion(standard, productive);
}

:root .#{$prefix}--body-background,
[data-carbon-theme='white'] .#{$prefix}--body-background,
[data-carbon-theme='g10'] .#{$prefix}--body-background {
  background-color: $layer-01;
}

[data-carbon-theme='g90'] .#{$prefix}--body-background,
[data-carbon-theme='g100'] .#{$prefix}--body-background {
  background-color: $layer-hover-01;
}

/* Animated gradient layer */
.#{$prefix}--body-gradient {
  position: absolute;
  z-index: 2;
  animation: 1000ms motion.motion(standard, expressive) animate-gradient;
  animation-delay: 466.666ms;
  animation-fill-mode: both;
  background: linear-gradient(0deg, #4589ff4d 0%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 64px;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 150ms motion.motion(standard, productive);
}

.#{$prefix}--body:hover {
  .#{$prefix}--body-gradient,
  .#{$prefix}--body-background {
    opacity: 0.85;
  }
}

.#{$prefix}--body::after {
  position: absolute;
  z-index: 3;
  border: 1px solid transparent;
  animation: 1000ms motion.motion(standard, expressive) animate-border;
  animation-delay: 466.666ms;
  animation-fill-mode: both;
  background: linear-gradient(180deg, #a6c8ff 64%, #78a9ff) border-box;
  background-size: 100% 150%;
  content: '';
  inset: 0;
  -webkit-mask:
    linear-gradient(#ffffff 0 0) padding-box,
    linear-gradient(#ffffff 0 0);
  mask:
    linear-gradient(#ffffff 0 0) padding-box,
    linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.#{$prefix}--icons {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: $spacing-05;
}

.#{$prefix}--tag {
  z-index: 4;
}

.#{$prefix}--title {
  @include type-style('body-compact-02');

  position: relative;
  z-index: 4;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @supports (-webkit-line-clamp: 3) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    white-space: initial;
  }
}

.#{$prefix}--footer {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: $spacing-05;
  inset-block-end: $spacing-05;
}

.#{$prefix}--subtitle {
  @include type-style('body-short-01');

  position: relative;
  z-index: 2;
  overflow: hidden;
  color: $text-secondary;
  text-overflow: ellipsis;
  white-space: nowrap;

  @supports (-webkit-line-clamp: 1) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: initial;
  }
}

.#{$prefix}--custom-content {
  z-index: 4;
}

.#{$prefix}--loading-skeleton {
  background: $layer-01;
  block-size: 100%;
  inline-size: 100%;

  opacity: 0.7;
}

.#{$prefix}--loading-skeleton::before {
  background: $layer-02;
}

@keyframes animate-border {
  0% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

@keyframes animate-gradient {
  0% {
    background-position: 100% 150%;
  }

  100% {
    background-position: 100% 100%;
  }
}