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

$css--plex: true !default;
@use 'sass:map';

/* Other Carbon settings. */
@use '@carbon/styles/scss/reset';
@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/utilities/ai-gradient' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/config' as carbon-config;

$prefix: 'c4p';
@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
@use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
@use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
  as spv;

$block-class: #{$prefix}--side-panel;
$block-class-action-set: #{$prefix}--action-set;

:host(#{$prefix}-side-panel) {
  /* Replaces use of Framer for slide in / out animation */
  --#{$block-class}--displaced: 100%;

  * {
    /* not sure why things are coming out as content-box */
    box-sizing: border-box;
  }

  .#{$block-class} {
    @extend .#{$block-class};

    /* for actions container query - note this changes the size calculation */
    container-name: side-panel;
    container-type: inline-size;

    &[placement='left'] {
      --#{$block-class}--displaced: -100%;
    }

    &[opening] {
      transform: translateX(var(--#{$block-class}--displaced));
    }

    &[open] {
      transform: translateX(0);
      transition: all $duration-moderate-02 motion(standard, productive);
    }

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

    &[closing] {
      transform: translateX(var(--#{$block-class}--displaced));
      transition: all $duration-moderate-01 motion(exit, productive);
    }

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

    &[placement='right'] {
      @extend .#{$block-class}--right-placement;

      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
      border-inline-end: none;
      inset-inline-end: 0;
    }

    /* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
    &[placement='left'] {
      @extend .#{$block-class}--left-placement;

      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
      border-inline-end: 1px solid $border-subtle-01;
      inset-inline-start: 0;
    }

    @each $size, $size_value in spv.$side-panel-sizes {
      &[size='#{$size}'] {
        @extend .#{$block-class}--#{$size};
      }
    }

    &[condensed-actions] {
      @extend .#{$block-class}--condensed-actions;
    }
  }

  #{$prefix}-layer {
    display: contents;
  }

  .#{$block-class}__overlay {
    &[opening] {
      opacity: 0;
    }

    @media screen and (prefers-reduced-motion: reduce) {
      &[open] {
        opacity: 1;
        transition: none;
      }
    }

    &[open] {
      opacity: 1;
      transition: all $duration-moderate-02 motion(standard, productive);
    }
    @media screen and (prefers-reduced-motion: reduce) {
      &[closing] {
        opacity: 0;
        transition: none;
      }
    }

    &[closing] {
      opacity: 0;
      transition: all $duration-moderate-01 motion(exit, productive);
    }
  }

  // Slide-in panels should use border not shadows since they don’t layer
  .#{$block-class}[slide-in]:not(.#{$block-class}__overlay) {
    box-shadow: none;
  }

  .#{$block-class}__header {
    &::before {
      z-index: 99; /* must be higher than action toolbar */
    }

    &[detail-step] {
      @extend .#{$block-class}__header--on-detail-step;
    }

    &[no-title-animation] {
      @extend .#{$block-class}__header--no-title-animation;
      // inset-block-start: 0;
    }

    &[reduced-motion] {
      @extend .#{$block-class}__header--reduced-motion;
    }

    &[has-action-toolbar] {
      margin-block-end: $spacing-03;
      padding-block-end: 0;
    }
  }

  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
    content: initial; /* remove border below */
  }

  .#{$block-class}__title-text {
    padding-inline-end: 0;
  }

  .#{$block-class}__subtitle-text {
    @extend .#{$block-class}__subtitle-text;

    &[hidden] {
      @extend .#{carbon-config.$prefix}--visually-hidden !optional;

      display: none;
    }
  }

  .#{$block-class}__action-toolbar {
    margin-block-end: 0;
    padding-inline-start: 0;

    &[hidden] {
      @extend .#{carbon-config.$prefix}--visually-hidden !optional;
    }

    ::slotted(.#{$block-class}__action-toolbar-leading-button) {
      margin-inline-end: $spacing-03;
    }
  }

  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
    @extend .#{carbon-config.$prefix}--visually-hidden !optional;
  }

  .#{$block-class}[has-slug] {
    @extend .#{$block-class}--has-slug;
  }

  .#{$block-class}[has-slug] [scrolls] {
    /* override carbon ai removing background gradient */
    background:
      linear-gradient(
          to top,
          var(--cds-layer) 0%,
          $ai-aura-start 0%,
          15%,
          $ai-aura-end 50%
        )
        padding-box,
      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
      linear-gradient(to bottom, $ai-border-start, $ai-border-end) border-box,
      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
  }

  [scrolls] {
    @extend .#{$block-class}--scrolls;
  }

  .#{$block-class}__body-content {
    @extend .#{$block-class}__body-content;
  }

  @mixin actions-placement() {
    --flex-direction: row;
    /* non carbon for IBM Products adjustment */
    flex-direction: var(--flex-direction);

    ::slotted(#{$prefix}-button) {
      flex: 0 1 25%;
      max-inline-size: to-rem(232px);
    }

    ::slotted(#{$prefix}-button[kind='ghost']) {
      flex: 1 1 25%;
      max-inline-size: none;
    }

    ::slotted(#{$prefix}-button[hidden]) {
      @extend .#{carbon-config.$prefix}--visually-hidden !optional;

      display: none;
    }

    // -1 in @container query is for 1px left border
    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
      &:not([actions-multiple='triple'])
        ::slotted(#{carbon-config.$prefix}-button) {
        // double and single on lg use 50%
        flex: 0 1 50%;
        max-inline-size: none;
      }
    }

    // -1 in @container query is for 1px left border
    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
      // md is 50% for two and 100% for one
      // column for triple
      &[actions-multiple] ::slotted(#{carbon-config.$prefix}-button) {
        flex: 0 0 100%;
        max-inline-size: none;
      }

      &[actions-multiple='double'] ::slotted(#{carbon-config.$prefix}-button) {
        flex: 0 1 50%;
        max-inline-size: none;
      }

      &[actions-multiple='triple'] {
        --flex-direction: column-reverse;

        ::slotted(#{carbon-config.$prefix}-button) {
          flex: initial;
          inline-size: 100%;
          max-inline-size: none;
        }
      }
    }

    // -1 in @container query is for 1px left border
    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
      --flex-direction: column-reverse;

      ::slotted(#{carbon-config.$prefix}-button) {
        flex: initial;
        inline-size: 100%;
        max-inline-size: none;
      }
    }
  }

  .#{$block-class}__actions-container {
    @extend .#{$block-class-action-set};

    inline-size: 100%;

    &[hidden] {
      @extend .#{carbon-config.$prefix}--visually-hidden !optional;

      display: none;
    }

    // Override ActionSet styles for side-panel specific behavior
    // Single button should always be full width in side-panel
    &[actions-multiple='single'] ::slotted(#{carbon-config.$prefix}-button) {
      flex: 0 0 100%;
      max-inline-size: none;
    }

    // Double buttons should be 50% width each
    &[actions-multiple='double'] ::slotted(#{carbon-config.$prefix}-button) {
      flex: 0 1 50%;
      max-inline-size: none;
    }

    // Triple buttons should be 33% width each
    &[actions-multiple='triple'] ::slotted(#{carbon-config.$prefix}-button) {
      flex: 0 1 33.33%;
      max-inline-size: none;
    }
  }

  .sentinel {
    @extend .#{carbon-config.$prefix}--visually-hidden !optional;
  }

  .#{$block-class}__close-button {
    inline-size: 2rem;
  }

  .#{$block-class}__resizer {
    position: absolute;
    z-index: z('modal');
    inset-block-end: 0;
    inset-block-start: 0;
    --resizer-thickness: 4px;
    --resizer-grab-thickness: 4px;
    --resizer-grab-color: transparent;
  }

  .#{$block-class}[placement='right'] .#{$block-class}__resizer {
    inset-inline-start: 0;
  }

  .#{$block-class}[placement='left'] .#{$block-class}__resizer {
    inset-inline-end: 0;
  }
}