/* ==========================================================================
 * Modals
 * ========================================================================== */

.mds-c-modal {
  @mixin mds-m-scroll-vertical;

  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-start;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  word-break: break-word;
  z-index: $z-index--modal;

  &--full-height {
    overflow: hidden;
  }

  &__overlay {
    background-color: var(--mds-t-background-color--overlay);
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    opacity: 0.8;
    position: fixed;
    right: 0;
    top: 0;
  }

  &__content {
    --mds-t-background-color: var(--mds-t-background-color--primary);

    background-color: var(--mds-t-background-color);
    border-radius: var(--mds-d-border-radius--default);
    box-shadow: var(--mds-d-elevation--4);
    color: var(--mds-t-text-color--primary);
    flex-shrink: 0;
    margin: var(--mds-d-spacing--lg);
    position: relative;
    width: calc(100% - (var(--mds-d-spacing--lg) * 2));
    z-index: 1;

    @media screen and (min-width: 32rem) {
      margin: var(--mds-d-spacing--xxl);
      max-width: 32rem;
      min-width: 32rem;
    }

    @media screen and (min-width: 800px) {
      margin: var(--mds-d-spacing--xxxl);
    }

    &--size-lg {
      max-width: 42rem;

      @media screen and (min-width: 42rem) {
        min-width: 42rem;
      }
    }

    &--size-xl {
      max-width: 58rem;

      @media screen and (min-width: 58rem) {
        min-width: 58rem;
      }
    }

    &--size-xxl {
      max-width: 80rem;

      @media screen and (min-width: 80rem) {
        min-width: 80rem;
      }
    }

    .mds-c-modal--full-height & {
      @mixin mds-m-scroll-vertical;

      display: flex;
      flex-direction: column;
      flex-shrink: 1;
      overflow: hidden;
    }
  }

  &__section {
    --mds-c-modal__section--padding: var(--mds-d-spacing--lg);

    flex-shrink: 0;
    padding-bottom: var(--mds-c-modal__section--padding);
    padding-left: var(--mds-c-modal__section--padding);
    padding-right: var(--mds-c-modal__section--padding);
    position: relative;

    @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
      &&--padding-$(spacing) {
        padding: var(--mds-d-spacing--$(spacing));
      }
      &&--divided.mds-c-modal__section--padding-$(spacing) {
        &:not(:first-child) {
          border-top: 1px solid var(--mds-t-border-color--secondary);
          padding-top: var(--mds-d-spacing--$(spacing));
        }
      }
    }

    @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
      &&--padding-vertical-$(x-spacing) {
        padding-bottom: var(--mds-d-spacing--$(x-spacing));
        padding-top: var(--mds-d-spacing--$(x-spacing));
      }
      &&--divided.mds-c-modal__section--padding-vertical-$(x-spacing) {
        &:not(:first-child) {
          border-top: 1px solid var(--mds-t-border-color--secondary);
          padding-top: var(--mds-d-spacing--$(x-spacing));
        }
      }
    }

    @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
      &&--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) {
      &&--padding-bottom-$(b-spacing) {
        padding-bottom: var(--mds-d-spacing--$(b-spacing));
      }
    }

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

    @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
      &&--padding-top-$(t-spacing) {
        padding-top: var(--mds-d-spacing--$(t-spacing));
      }
      &&--divided.mds-c-modal__section--padding-top-$(t-spacing) {
        &:not(:first-child) {
          border-top: 1px solid var(--mds-t-border-color--secondary);
          padding-top: var(--mds-d-spacing--$(t-spacing));
        }
      }
    }

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

    @media screen and (min-width: 600px) {
      --mds-c-modal__section--padding: var(--mds-d-spacing--xxl);
    }

    .mds-c-modal__content > &:first-child {
      padding-top: var(--mds-c-modal__section--padding);
    }

    &--divided {
      &:not(:first-child) {
        border-top: 1px solid var(--mds-t-border-color--secondary);
        padding-top: var(--mds-c-modal__section--padding);
      }
    }

    &--scrollable {
      @mixin mds-m-scroll-vertical;

      flex-shrink: 1;

      &:not(:has(+ .mds-c-modal__section--divided)) {
        margin-bottom: var(--mds-d-spacing--lg);
      }
    }
  }

  &__autofocusinside {
    display: contents;
  }

  &__section + &__autofocusinside {
    > .mds-c-modal__section--divided:first-child {
      border-top: 1px solid var(--mds-t-border-color--secondary);
    }
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-modal {
    .mds-c-modal__content {
      margin: var(--mds-d-spacing--xs);
      overflow-y: auto;
      width: 100%;
    }

    .mds-c-view__header {
      max-height: 3.5rem;
      overflow-x: hidden;

      .mds-c-section {
        .mds-c-level {
          .mds-c-level__group {
            &:nth-child(1) {
              flex: 1 1 40%;
            }

            &:nth-child(2) {
              flex: 1 1 60%;
              justify-content: center;
              margin-right: -0.5rem;

              .mds-c-level__item {
                &:nth-child(1) {
                  margin-right: var(--mds-d-spacing--sm);
                  padding: var(--mds-d-spacing--sm) 0;

                  button {
                    padding: var(--mds-d-spacing--sm) 0;
                  }
                }

                &:nth-child(2) {
                  margin-right: 0;
                  padding-left: 0;
                }
              }
            }

            .mds-c-buttons {
              display: contents;

              .mds-c-button {
                margin: 0;
                padding: 0;
              }
            }
          }
        }
      }
    }

    .mds-c-main {
      .mds-c-main__menu {
        flex: 1 1 50%;
      }

      .mds-c-main__column {
        flex: 1 1 50%;

        .mds-c-section {
          .mds-js-tabs .mds-c-tabs__list {
            flex-direction: column;
            gap: 1rem;

            .mds-c-tab {
              margin-left: 0;
            }
          }

          div[data-tracking='task'],
          div[data-tracking='proof'] {
            div:nth-child(1)[role='tablist'] {
              flex-direction: column;
              gap: 1rem;
              padding-left: 0;

              div {
                padding: 0.1rem;

                &:nth-child(2) {
                  margin-left: 0;
                }
              }
            }
          }

          #task-top-tabs-overview
            .mds-c-description-list
            .mds-c-description-list__description {
            .mds-c-level
              .mds-c-level__group.mds-c-level__group--position-right {
              padding-left: 0;
            }
          }

          #task-bottom-tabs-panel-0 > div {
            flex-direction: column;
            padding: 0;

            div:nth-child(2) {
              form[data-tracking='proof-comments-write'],
              form[data-tracking='task-comments-write'] {
                .mds-c-buttons {
                  align-items: baseline;
                  flex-direction: column;
                  margin-right: 0;
                }
              }
            }

            div:has(.mds-c-avatar) {
              margin-bottom: 0.5rem;
            }

            div:has(button[data-tracking='proof-comments-write']),
            div:has(button[data-tracking='task-comments-write']) {
              width: 100%;
            }

            div:nth-child(2) div:nth-child(4) {
              .mds-c-level {
                align-items: center;
                flex-direction: unset;

                button[data-tracking='proof-comments-write-save-button'],
                button[data-tracking='task-comments-write-save-button'] {
                  align-self: center;
                }
              }
            }

            + ul .custom-feed-content div:nth-child(2) {
              align-items: baseline;
              flex-direction: column;
              margin-right: 0;

              div {
                width: 100%;
              }
            }

            div:nth-child(2) div[role='toolbar'].editor-toolbar {
              flex-direction: unset;

              div {
                flex-direction: unset;
              }
            }
          }

          .mds-c-media-card__wrapper {
            .mds-c-media-card {
              align-items: anchor-center;
              display: flex;
              flex-direction: column;
              padding-bottom: 0.3rem;
            }
          }

          .mds-c-feed {
            margin-left: 0;
          }

          &:nth-child(2) {
            display: flex;
            flex-direction: column;
            gap: 1rem;
          }
        }
      }

      .mds-c-section-header {
        .mds-c-info-plate {
          align-items: baseline;
          flex-direction: column;
        }
      }
    }
  }

  div[direction='bottom'] {
    background: transparent;
    margin-top: 0.1rem;
  }
}

@media (max-width: $reflow-zoom-level--400) {
  .mds-c-modal__section {
    --mds-c-modal__section--padding: var(--mds-d-spacing--med);
  }
}