/* ==========================================================================
 * Application
 * ========================================================================== */

.mds-c-application {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  &__canvas {
    height: 100%;
    overflow: hidden;
    position: relative;
  }

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

    background-color: var(--mds-t-background-color);
    display: flex;
    height: 100%;
    overflow: hidden;
  }
}

@media (max-width: $reflow-zoom-level--150) {
  .mds-c-application {
    .mds-c-layout {
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;

      > .mds-c-main-content {
        min-width: 0;
        overflow: visible;
      }
    }
  }
}

/* 
  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--250) {
  .mds-c-application {
    .mds-c-portal {
      & > div:has(.emoji-mart) {
        max-width: 95%;
      }

      .emoji-mart {
        width: 100% !important;

        .emoji-mart-anchors {
          display: inline-flex !important;
          width: 100%;

          button {
            flex: 1 1 auto;
          }
        }

        .emoji-mart-category .emoji-mart-category-label span {
          padding: 0;
        }

        .emoji-mart-scroll {
          --emoji-scroll-height: 35vh;

          max-height: var(--emoji-scroll-height);
          overflow-y: auto;
        }
      }
    }
  }
}

@media (max-width: $reflow-zoom-level--400) {
  .mds-c-application {
    .mds-c-portal {
      .emoji-mart {
        .emoji-mart-scroll {
          --emoji-scroll-height: 25vh;
        }
      }
    }
  }
}