/* ==========================================================================
 * Popout
 * ========================================================================== */

@keyframes mds-c-popout-animation-bottom {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateY(calc(var(--animation-transform) * -1));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-popout-animation-left {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateX(var(--animation-transform));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-popout-animation-right {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateX(calc(var(--animation-transform) * -1));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-popout-animation-top {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateY(var(--animation-transform));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

.mds-c-popout {
  --mds-t-background-color: var(--mds-t-background-color--primary);
  --mds-v-popout__background-color: var(--mds-t-background-color);

  opacity: 0;
  z-index: $z-index--tooltip;

  &.mds-is-expanded {
    display: block;
    opacity: 1;
  }
}

.mds-c-popout__menu {
  --animation-duration: 0.25s;
  --animation-scale: 0.7;
  --animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.1);
  --animation-transform: var(--mds-d-spacing--xl);
  --transform-origin: var(--transform-origin-x, center)
    var(--transform-origin-y, center);

  animation-fill-mode: forwards;
  background-color: var(--mds-v-popout__background-color);
  border: 1px solid var(--mds-t-border-color--secondary);
  border-radius: var(--mds-d-border-radius--default);
  filter: drop-shadow(var(--mds-d-elevation--4));
  padding: var(--mds-d-spacing--lg);
  transform: translateZ(
    0
  ); /* MDS-533 - Chrome z-index/overflow hidden rendering issue */

  transform-origin: var(--transform-origin);

  &--max-height-sm {
    max-height: 18rem;
  }

  &--max-height-med {
    max-height: 25rem;
  }

  &--max-height-lg {
    max-height: 32rem;
  }

  &--max-height-fit {
    max-height: fit-content;
  }

  &--size-sm {
    width: 6rem;
  }

  &--size-med {
    width: 12rem;
  }

  &--size-lg {
    width: 18rem;
  }

  &--size-xl {
    width: 22rem;
  }

  &--size-xxl {
    width: 26rem;
  }

  &--size-3xl {
    width: 32rem;
  }

  &--size-fit {
    width: fit-content;
  }

  /*
   * Add spacing between Popout Menu and its target.
   */

  &[data-popout-direction='top'] {
    margin-bottom: var(--mds-d-spacing--med);
  }

  &[data-popout-direction='bottom'] {
    margin-top: var(--mds-d-spacing--med);
  }

  &[data-popout-direction='right'] {
    margin-left: var(--mds-d-spacing--med);
  }

  &[data-popout-direction='left'] {
    margin-right: var(--mds-d-spacing--med);
  }

  /*
   * Add animations
   */

  .mds-is-expanded & {
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--animation-timing-function);
    opacity: 1;
  }

  /* Bottom */
  .mds-is-expanded.mds-is-target-attached-bottom
    > &[data-popout-direction='bottom'],
  .mds-is-expanded.mds-is-target-attached-bottom
    > &[data-popout-direction='top'] {
    animation-name: mds-c-popout-animation-bottom;
  }

  /* Left */
  .mds-is-expanded.mds-is-target-attached-left
    > &[data-popout-direction='left'],
  .mds-is-expanded.mds-is-target-attached-left
    > &[data-popout-direction='right'] {
    animation-name: mds-c-popout-animation-left;
  }

  /* Right */
  .mds-is-expanded.mds-is-target-attached-right
    > &[data-popout-direction='left'],
  .mds-is-expanded.mds-is-target-attached-right
    > &[data-popout-direction='right'] {
    animation-name: mds-c-popout-animation-right;
  }

  /* Top */
  .mds-is-expanded.mds-is-target-attached-top
    > &[data-popout-direction='bottom'],
  .mds-is-expanded.mds-is-target-attached-top > &[data-popout-direction='top'] {
    animation-name: mds-c-popout-animation-top;
  }

  /*
   * Add transform-origin based on which direction it's attached.
   */

  .mds-is-element-attached-bottom & {
    --transform-origin-x: bottom;
  }

  .mds-is-element-attached-left & {
    --transform-origin-y: left;
  }

  .mds-is-element-attached-right & {
    --transform-origin-y: right;
  }

  .mds-is-element-attached-top & {
    --transform-origin-x: top;
  }
}

.mds-c-popout__menu-panel {
  --mds-v-popout__padding: var(--mds-d-spacing--lg);

  @mixin mds-m-scroll-vertical;

  margin-left: calc(var(--mds-d-spacing--lg) * -1);
  margin-right: calc(var(--mds-d-spacing--lg) * -1);
  max-height: 26rem;
  padding: var(--mds-v-popout__padding);

  &--no-padding {
    padding: 0;
  }

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-$(spacing) {
      padding: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-vertical-$(x-spacing) {
      padding-bottom: var(--mds-d-spacing--$(x-spacing));
      padding-top: var(--mds-d-spacing--$(x-spacing));
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-horizontal-$(y-spacing) {
      padding-left: var(--mds-d-spacing--$(y-spacing));
      padding-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-bottom-$(b-spacing) {
      padding-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-left-$(l-spacing) {
      padding-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-top-$(t-spacing) {
      padding-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs, zero) {
    &&--padding-right-$(r-spacing) {
      padding-right: var(--mds-d-spacing--$(r-spacing));
    }
  }

  &:first-child {
    margin-top: calc(var(--mds-d-spacing--lg) * -1);
    position: relative;
    z-index: 1;
  }

  &:last-child {
    margin-bottom: calc(var(--mds-d-spacing--lg) * -1);
  }

  &:not(:last-child) {
    border-bottom: 1px solid var(--mds-t-border-color--secondary);
  }
}

.mds-c-popout__title {
  @mixin mds-m-heading--size-med;
  @mixin mds-m-text-overflow-ellipsis;

  color: var(--mds-t-text-color--secondary);
  text-align: center;
}

.mds-c-popout__label {
  @mixin mds-m-heading--size-xs;
}

.mds-c-backdrop {
  background-color: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9998;
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom, applied reflow styles starting at 150% zoom,
  since some elements are cut off or difficult to use even at that level.
  At 150% zoom on a 1280px screen, the effective CSS width is about 853.33px.
*/
@media (max-width: $reflow-zoom-level--150) {
  .mds-c-popout {
    max-width: 95%;

    /* Override inline style */
    transform: translate3d(0.3125rem, 0.3125rem, 0) !important;

    &__menu {
      max-width: 98%;

      &-panel {
        max-height: 80vh;
        padding: var(--mds-d-spacing--sm);

        &:first-child {
          overflow-y: auto;
        }

        &:has(input[placeholder='Search']) {
          overflow: hidden;
        }
      }

      &:has(.mds-c-popout__menu-panel:nth-child(2)) {
        .mds-c-popout__menu-panel {
          max-height: 50vh;
        }
      }
    }
  }
}