/**
 * Copyright IBM Corp. 2016, 2024
 *
 * 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/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/layout' as *;
@use '@carbon/styles/scss/components/button' as *;
@use '@carbon/styles/scss/components/checkbox';
@use '@carbon/web-components/scss/components/accordion/accordion';
@use '@carbon/web-components/scss/components/modal/modal';
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

@mixin filter-panel {
  .#{$prefix}--filter__heading {
    @include type-style('heading-01');

    padding: $spacing-05;
  }

  .#{$prefix}--filter-panel__section {
    overflow: initial;
    box-sizing: border-box;
    background-color: $layer-01;
    margin-block-start: $spacing-05;
    padding-block-end: to-rem(112px);

    @include breakpoint(md) {
      block-size: 80%;
      inline-size: 60%;
    }

    @include breakpoint(lg) {
      block-size: auto;
      inline-size: auto;
      padding-block-end: $spacing-09;
    }
  }

  .#{$prefix}--modal-body {
    overflow-y: scroll;
  }

  .#{$prefix}--input-container:focus {
    outline: $spacing-01 solid $focus;
  }

  .#{$prefix}--input-container__heading {
    position: relative;
    padding: $spacing-03 $spacing-05;
    color: $text-secondary;
    cursor: pointer;
    @include type-style('body-compact-01');

    &:hover {
      color: $text-primary;
    }

    &:focus-visible {
      z-index: 1;
      margin-inline: $spacing-01;
      outline: $spacing-01 solid $focus;
      padding-inline-start: to-rem(14px);
    }

    .#{$prefix}--close__icon {
      position: absolute;
      inset-block-start: to-rem(10px);
      inset-inline-end: $spacing-05;
    }
  }

  .#{$prefix}--selected-option-dropdown {
    display: grid;
    padding: 0;
    margin: 0;

    &.#{$prefix}--selected-option-dropdown__hidden {
      display: none;
    }
  }

  @media (width >= 640px) {
    .#{$prefix}--accordion__content {
      padding-inline-end: 0;
    }
  }

  .#{$prefix}--accordion__content {
    padding-inline: 0;
  }

  .#{$prefix}--clear {
    border: 0;
    background-color: $layer-01;
    color: $link-primary;
    cursor: pointer;
    padding-inline-end: $spacing-05;
    @include type-style('body-compact-01');
  }

  .#{$prefix}--heading-clear {
    display: flex;
    justify-content: space-between;
  }

  .#{$prefix}--reset__icon {
    padding-block-start: $spacing-01;
    padding-inline-start: $spacing-03;
  }

  .#{$prefix}--clear__container {
    display: flex;
    align-items: center;
  }

  :host(#{$c4d-prefix}-filter-panel) {
    .#{$prefix}--clear {
      display: block;

      &:focus-visible {
        margin-block: $spacing-01;
        margin-inline-end: $spacing-01;
        outline: $spacing-01 solid $focus;
      }

      &:hover {
        color: $link-primary-hover;
      }
    }

    &:not([has-selections]) {
      .#{$prefix}--clear {
        color: $button-disabled;
        cursor: not-allowed;
      }
    }
    @include breakpoint-down(lg) {
      display: none;
    }
  }

  :host(#{$c4d-prefix}-filter-panel-composite) {
    @include emit-layout-tokens();

    #{$prefix}-button {
      @include breakpoint(lg) {
        display: none;
      }
    }
  }

  :host(#{$c4d-prefix}-filter-panel-checkbox) {
    color: $text-secondary;
    padding-block-end: to-rem(6px);
    padding-inline-start: to-rem(14px);
    @extend .#{$prefix}--checkbox-label;
    @include type-style('body-compact-01');

    &:hover,
    &[checked] {
      color: $text-primary;
    }

    label.#{$prefix}--checkbox-label {
      padding-block-start: $spacing-01;
      padding-inline-start: $spacing-06;

      &::before {
        border: 1px solid $icon-secondary;
      }

      &:hover::before {
        border: 1px solid $icon-primary;
      }
    }
  }

  :host(#{$c4d-prefix}-filter-panel-input-select) {
    display: block;

    &:hover {
      background-color: $background-hover;
    }

    &[selected] {
      background-color: $highlight;
    }
  }

  :host(#{$c4d-prefix}-filter-panel-input-select-item) {
    @include type-style('body-compact-01');

    position: relative;
    padding: $spacing-03 $spacing-06;

    background-color: $layer-01;
    color: $text-secondary;
    cursor: pointer;

    &:hover {
      background-color: $background-hover;
      color: $text-primary;
    }

    &:active {
      background-color: $highlight;
    }

    &[selected] {
      background-color: $highlight;
      color: $text-primary;
    }

    .#{$prefix}--close__icon {
      position: absolute;
      inset-block-start: to-rem(10px);
      inset-inline-end: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-filter-panel-heading) {
    display: none;
  }

  :host(#{$c4d-prefix}-filter-group) {
    @extend :host(#{$prefix}-accordion);
  }

  :host(#{$c4d-prefix}-filter-group:first-of-type) {
    ::slotted(#{$prefix}-filter-group-item:first-of-type) {
      @include breakpoint-down(md) {
        margin-block-start: $spacing-05;
      }
    }
  }

  :host(#{$c4d-prefix}-filter-group-item) {
    @extend :host(#{$prefix}-accordion-item);

    display: block;
    border-block-end: none;
    border-block-start: 1px solid $layer-accent-01;
    outline: none;

    .#{$prefix}--accordion__wrapper {
      /* stylelint-disable declaration-no-important */
      // TODO: see if we can remove. Need important to override accordion inline styles.
      max-block-size: none !important;
      /* stylelint-enable declaration-no-important */
    }

    .#{$prefix}--accordion__heading {
      display: flex;
      align-items: center;
    }

    .#{$prefix}--accordion__title {
      @include type-style('heading-01');
    }

    .#{$c4d-prefix}-filter-group-item__view-all {
      @include font-family('sans');

      padding: $spacing-03 $spacing-05;
      cursor: pointer;

      inline-size: 100%;
      text-align: start;

      &:focus-visible {
        border-color: $focus;
        box-shadow: inset 0 0 0 $button-outline-width $focus,
          inset 0 0 0 $button-border-width $background;
        outline: none;
      }
    }

    &:last-of-type {
      border-block-end: 1px solid $layer-accent-01;
    }
  }

  :host(#{$c4d-prefix}-filter-group-item:not([open])) {
    .#{$prefix}--accordion__wrapper {
      display: none;
    }
  }

  :host(#{$c4d-prefix}-filter-group-item[open]:not([disabled])) {
    @extend .#{$prefix}--accordion__item--active;

    .#{$prefix}--accordion__content {
      padding-inline: 0;
    }
  }

  :host(#{$c4d-prefix}-filter-modal-footer) {
    position: absolute;
    z-index: 999;
    display: flex;
    overflow: auto;
    inline-size: 100%;
    inset-block-end: 0;
  }

  :host(#{$c4d-prefix}-filter-modal-heading) {
    @include type-style('heading-01');

    display: block;
    padding-block-end: $spacing-03;
  }

  :host(#{$c4d-prefix}-filter-panel-modal) {
    @extend :host(#{$prefix}-modal);

    inset-inline-start: 0;

    @include breakpoint(lg) {
      display: none;
    }

    .#{$prefix}--filter-panel__section.#{$prefix}--modal-container {
      overflow: initial;
      transform: translate3d(0, 0, 0);
      @include breakpoint(md) {
        block-size: 80%;
        inline-size: 60%;
      }
    }
  }

  :host(#{$c4d-prefix}-filter-panel-modal[open]) {
    @extend :host(#{$prefix}-modal[open]);
    @include breakpoint(lg) {
      display: none;
    }
  }

  :host(#{$c4d-prefix}-filter-panel-modal[expressive-size='full-width']) {
    .#{$prefix}--modal-container {
      max-block-size: none;

      @include breakpoint(lg) {
        block-size: calc(100% - $spacing-07);
        inline-size: calc(100% - $spacing-07);
      }

      .#{$prefix}--modal-content {
        padding: 0;
        margin: $spacing-09 $spacing-07;
      }
    }
  }

  :host(#{$c4d-prefix}-filter-modal-footer-button) {
    @extend :host(#{$prefix}-modal-footer-button);
  }
}