//
// Copyright IBM Corp. 2022, 2026
//
// 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/components/tag' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/colors' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../button-group' as *;
@use '../structured-list' as *;

// @include button-group;
// @include structured-list;
// @include tags;

@keyframes sticky-header-slide-in {
  from {
    inset-block-start: -100%;
  }

  to {
    inset-block-start: var(--#{$c4d-prefix}-sticky-header-height);
  }
}

@mixin pricing-table {
  .#{$c4d-prefix}--pricing-table,
  :host(#{$c4d-prefix}-pricing-table) {
    @extend .#{$c4d-prefix}--structured-list;

    overflow-y: hidden;

    .#{$c4d-prefix}-pricing-table-sentinel {
      position: relative;
      display: block;
      block-size: 1px;
      margin-block-start: -1px;
    }
  }

  .#{$prefix}--pricing-table-group,
  :host(#{$c4d-prefix}-pricing-table-group) {
    @extend .#{$prefix}--structured-list-group;
  }

  .#{$prefix}--pricing-table-header-row,
  :host(#{$c4d-prefix}-pricing-table-header-row) {
    @extend .#{$prefix}--structured-list-header-row;

    box-shadow: none;
    transition: top $duration-slow-01 motion(standard, productive),
      box-shadow $duration-fast-02 motion(standard, productive);

    // Pseudo full width background activated when row is sticky.
    &::before {
      position: absolute;
      content: '';
      inline-size: 0;
      inset-block: 0;
      inset-inline-start: 0;
      transition: $duration-slow-01 motion(standard, productive),
        box-shadow 0 motion(standard, productive);

      @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &.#{$prefix}--pricing-table-header-row--sticky {
      position: sticky;
      z-index: 1;
      animation: sticky-header-slide-in $duration-slow-01
        motion(standard, productive);
      background-color: $background;
      inset-block-start: var(--#{$c4d-prefix}-sticky-header-height);

      &::before {
        @include breakpoint(md) {
          background-color: $background;
          box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
          inline-size: 100vw;
          inset-inline: calc(50% - 50vw);
          transition: $duration-fast-02 motion(standard, productive),
            box-shadow $duration-slow-01 motion(standard, productive);

          @media screen and (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }
      }

      &::after {
        background-color: transparent;
      }
    }
  }

  .#{$prefix}--pricing-table-header-row,
  .#{$prefix}--pricing-table-row,
  .#{$prefix}--pricing-table-group tr,
  :host(#{$c4d-prefix}-pricing-table-header-row),
  :host(#{$c4d-prefix}-pricing-table-row),
  :host(#{$c4d-prefix}-pricing-table-group) tr {
    @extend .#{$prefix}--structured-list-all-rows;

    position: relative;

    /**
     * Add pseudo border to ensure border extends to end of row even if there
     * aren't enough cells to fill row width.
     */

    &::after {
      position: absolute;
      display: block;
      background-color: $layer-accent-01;
      block-size: 1px;
      content: '';
      inline-size: 100%;
      inset-block-end: 0;
      inset-inline-end: 0;
    }
  }

  :host(#{$c4d-prefix}-pricing-table-group) tr {
    border: none;
    border-radius: 4px;
    background-color: $purple-20;

    @include breakpoint-down(lg) {
      box-shadow: 50vw 0 $purple-20;
    }

    &::after {
      background-color: $purple-20;
      block-size: 0;
    }
  }

  .#{$prefix}--pricing-table-header-row,
  .#{$prefix}--pricing-table-row,
  :host(#{$c4d-prefix}-pricing-table-header-row),
  :host(#{$c4d-prefix}-pricing-table-row) {
    ::slotted(:last-child) {
      flex-grow: none;
      max-inline-size: var(--width);
    }
  }

  .#{$prefix}--pricing-table-header-cell,
  .#{$prefix}--pricing-table-cell,
  .#{$prefix}--pricing-table-group th,
  :host(#{$c4d-prefix}-pricing-table-header-cell),
  :host(#{$c4d-prefix}-pricing-table-cell),
  :host(#{$c4d-prefix}-pricing-table-group) th {
    @extend .#{$prefix}--structured-list-all-cells;

    padding-block-end: $spacing-05;
  }

  .#{$prefix}--pricing-table-header-cell,
  .#{$prefix}--pricing-table-cell,
  :host(#{$c4d-prefix}-pricing-table-header-cell),
  :host(#{$c4d-prefix}-pricing-table-cell) {
    position: relative;
    background-color: $background;

    &.highlighted {
      background-color: $purple-10;
    }

    .#{$prefix}--pricing-table-cell-inner {
      display: flex;
      justify-content: space-between;
      inline-size: 100%;
    }
  }

  .#{$prefix}--pricing-table-header-cell,
  :host(#{$c4d-prefix}-pricing-table-header-cell) {
    @extend .#{$prefix}--structured-list-header-cell;
  }

  .#{$prefix}--pricing-table-header-cell:not([scope='row']),
  :host(#{$c4d-prefix}-pricing-table-header-cell:not([scope='row'])) {
    padding-block-end: $spacing-12;
    transition: padding-block-end $duration-slow-01 motion(standard, productive);

    &.#{$prefix}--pricing-table-header-cell--sticky {
      border-block-end-color: transparent;

      &::after {
        @include breakpoint-down(md) {
          /**
           * Mobile sticky header shadow must be set on cells since they extend
           * beyond the width of their container.
           */
          $shadow-height: 6px;

          position: absolute;
          background: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
          block-size: $shadow-height;

          content: '';
          inset-block-end: $shadow-height * -1;
          inset-inline: 0;
        }
      }
    }

    &.#{$prefix}--pricing-table-header-cell--sticky[type='complex'] {
      padding-block-end: $spacing-05;

      .#{$prefix}--pricing-table-header-cell-tag-wrapper,
      .#{$prefix}--pricing-table-cell-inner {
        transition: $duration-slow-01 motion(standard, productive),
          opacity $duration-fast-02 motion(standard, productive);
      }

      .#{$prefix}--pricing-table-header-cell-cta,
      ::slotted(#{$c4d-prefix}-pricing-table-header-cell-cta) {
        margin-block-start: $spacing-05;
      }
    }

    .#{$prefix}--pricing-table-header-cell-tag-wrapper,
    .#{$prefix}--pricing-table-cell-inner {
      transition: $duration-slow-01 motion(standard, productive),
        opacity $duration-slow-01 motion(standard, productive) $duration-slow-01;
    }

    &.highlighted {
      position: relative;

      ::slotted(#{$c4d-prefix}-pricing-table-highlight-label) {
        display: block;
      }
    }

    .#{$prefix}--pricing-table-header-cell-inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      block-size: 100%;
    }
  }

  .#{$prefix}--pricing-table-cell,
  :host(#{$c4d-prefix}-pricing-table-cell) {
    @extend .#{$prefix}--structured-list-cell;

    &.annotation-visible {
      ::slotted(#{$c4d-prefix}-pricing-table-cell-annotation) {
        display: block;
        block-size: auto;
        margin-block-start: $spacing-05;
        opacity: 1;
        transform: translateY(0);
      }
    }

    &.annotation-visible.no-cell-content {
      ::slotted(#{$c4d-prefix}-pricing-table-cell-annotation) {
        margin-block-start: 0;
      }
    }
  }

  :host(#{$c4d-prefix}-pricing-table-cell[icon]) {
    &[icon='checkmark'] svg {
      color: $purple-60;
    }

    svg {
      flex-shrink: 0;
      margin-inline-end: $spacing-03;
    }
  }

  .#{$prefix}--pricing-table-highlight-label,
  :host(#{$c4d-prefix}-pricing-table-highlight-label) {
    @include type-style('body-compact-01');

    position: absolute;

    display: none;
    padding: $spacing-03 $spacing-05;
    border-radius: 4px 4px 0 0;
    background-color: $purple-60;
    color: $icon-inverse;
    inset-block-end: 100%;
    inset-inline: 0;
  }

  .#{$prefix}--pricing-table-header-cell-headline,
  :host(#{$c4d-prefix}-pricing-table-header-cell-headline) {
    display: block;

    @include type-style('heading-03');

    color: $text-primary;
  }

  .#{$prefix}--pricing-table-header-cell-caption,
  :host(#{$c4d-prefix}-pricing-table-header-cell-caption) {
    @include type-style('heading-compact-01');

    display: block;

    color: $text-primary;
  }

  .#{$prefix}--pricing-table-header-cell-tag,
  :host(#{$c4d-prefix}-pricing-table-header-cell-tag) a {
    @extend .#{$prefix}--tag;
    @extend .#{$prefix}--tag--green;
    @extend .#{$prefix}--tag--sm;

    margin: $spacing-05 0 0;

    text-decoration: none;

    &[href] {
      cursor: pointer;
    }
  }

  .#{$prefix}--pricing-table-header-cell-description,
  :host(#{$c4d-prefix}-pricing-table-header-cell-description) {
    @include type-style('body-01');

    display: block;
    color: $text-primary;
    margin-block-start: $spacing-05;
  }

  .#{$prefix}--pricing-table-header-cell-cta,
  :host(#{$c4d-prefix}-pricing-table-header-cell-cta) {
    @extend :host(#{$c4d-prefix}-button-group-item);

    display: block;
    margin-block-start: $spacing-06;

    .#{$prefix}--btn svg {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-end: $spacing-05;
      transform: translateY(-50%);
    }
  }

  .#{$prefix}--pricing-table-annotation-toggle,
  :host(#{$c4d-prefix}-pricing-table-annotation-toggle) {
    padding-inline-end: $spacing-03;

    button {
      padding: $spacing-05;
      border: none;
      margin: -$spacing-05;
      background: none;
    }

    svg {
      fill: $toggle-off;
    }
  }

  .#{$prefix}--pricing-table-cell-annotation,
  :host(#{$c4d-prefix}-pricing-table-cell-annotation) {
    display: block;
    block-size: 0;
    color: $text-secondary;
    opacity: 0;
    transform: translateY(-#{$spacing-05});
    transition: $duration-fast-02 motion(standard, productive);
  }

  :host(.overflowing-right) .overflow-indicator.right,
  :host(.overflowing-left) .overflow-indicator.left {
    opacity: 1;
  }

  :host([last-row]) {
    ::slotted(.highlighted) {
      border-radius: 0 0 10px 10px;
    }
  }
}