//
// Copyright IBM Corp. 2020, 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.
//

// NOTE: Please do not remove the duplicate `slug` and `decorator` classes. We need both until slug is fully deprecated

// Standard imports.
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/utilities';
@use '@carbon/styles/scss/config' as carbon-config;

@use '../../global/styles/project-settings' as c4p-settings;

$block-class: #{c4p-settings.$pkg-prefix}--card;

.#{$block-class} {
  border: 1px solid transparent;
  background-color: $layer-01;
  color: $text-primary;
}

.#{$block-class}__clickable {
  border-color: $border-tile-01;
  cursor: pointer;
  // stylelint-disable-next-line carbon/motion-easing-use
  transition: background-color $duration-fast-02;
}

.#{$block-class}__clickable:focus {
  @include utilities.focus-outline('outline');
}

.#{$block-class}__clickable:hover {
  background-color: $layer-hover-01;
}

.#{$block-class}__media-left {
  display: flex;
  flex-direction: row;
}

.#{$block-class}__media-left .#{$block-class}__content-container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.#{$block-class}__media-left .#{$block-class}__footer {
  align-self: flex-end;
  margin-block-start: auto;
}

.#{$block-class}__media > * {
  display: block;
  max-inline-size: 100%;
}

.#{$block-class}__header {
  padding: $spacing-05;
  padding-inline-end: 0; // makes for consistent slug position across productive and expressive
}

.#{$block-class}__header-label-only {
  padding-block-end: $spacing-03;
}

.#{$block-class}__header-label-only .#{$block-class}__label {
  margin-block-end: 0;
}

.#{$block-class}__header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.#{$block-class}__label {
  @include type-style('label-01');

  margin-block-end: $spacing-01;
}

.#{$block-class}__description {
  @include type-style('label-01');

  margin-block-start: $spacing-01;
}

.#{$block-class}__body {
  @include type-style('body-compact-01');

  padding: $spacing-05;
  padding-block-start: 0;
}

.#{$block-class}__footer {
  display: flex;
  justify-content: flex-end;
}

.#{$block-class}__actions {
  display: flex;
  flex-direction: row;
}

.#{$block-class}__icon {
  padding: $spacing-03;
  color: inherit;
  cursor: pointer;
}

.#{$block-class}__icon:hover {
  background-color: $layer-hover-01;
}

.#{$block-class}__icon:active {
  color: $link-primary-hover;
}

.#{$block-class}__link {
  color: inherit;
  text-decoration: inherit;
}

.#{$block-class}__pictogram {
  padding-block-start: $spacing-05;
  padding-inline-start: $spacing-05;
}

.#{$block-class}__header-container--has-actions {
  padding-inline-end: $spacing-03;
}

// +++ adjustments for slug
.#{$block-class} {
  position: relative;
}

.#{$block-class}__media + .#{$block-class}__content-container {
  /* display relative to container when media displayed */
  position: relative;
}

.#{$block-class} .#{carbon-config.$prefix}--slug,
.#{$block-class} .#{carbon-config.$prefix}--ai-label {
  position: absolute;
  inset-block-start: $spacing-05;
  inset-inline-end: $spacing-05;
}

.#{$block-class}__header__inner-wrapper--decorator {
  position: absolute;
  inset-block-start: $spacing-05;
  inset-inline-end: $spacing-05;

  .#{carbon-config.$prefix}--slug,
  .#{carbon-config.$prefix}--ai-label {
    position: relative;
    inset-block-start: unset;
    inset-inline-end: unset;
  }
}

.#{$block-class}__header-container--has-slug,
.#{$block-class}__header-container--has-decorator {
  inline-size: 100%;
  padding-inline-end: $spacing-07;
}

.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--has-actions {
  padding-inline-end: $spacing-08;
}

.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--large-tile-or-label {
  padding-inline-end: $spacing-09;
}

.#{$block-class}__clickable {
  position: relative;
}

.#{$block-class}__clickable .#{carbon-config.$prefix}--slug,
.#{$block-class}__clickable .#{carbon-config.$prefix}--slug-icon {
  pointer-events: none;
}

.#{$block-class}--has-slug,
.#{$block-class}--has-ai-label {
  @include utilities.ai-popover-gradient('default', 0, 'layer');

  border: 1px solid transparent;
  box-shadow:
    inset 0 -80px 70px -65px $ai-inner-shadow,
    0 4px 10px 2px $ai-drop-shadow;
}

.#{$block-class}__clickable.#{$block-class}--has-slug::before,
.#{$block-class}__clickable.#{$block-class}--has-ai-label::before {
  @include utilities.ai-popover-gradient('hover', 0, 'layer');

  position: absolute;
  display: block;
  block-size: 100%;
  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
  content: '';
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  transition: opacity $duration-fast-02 motion(standard, productive);
}

.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before,
.#{$block-class}__clickable.#{$block-class}--has-ai-label:hover::before {
  opacity: 1;
}

.#{$block-class}__clickable .#{$block-class}__content-container {
  position: relative;
  z-index: 1;
}

.#{$block-class} .#{carbon-config.$prefix}--slug-icon rect {
  stroke: $icon-primary;
}

.#{$block-class} .#{carbon-config.$prefix}--slug-icon path {
  fill: $icon-primary;
}

// --- adjustments for slug