$scrollbar-track-width: 12px;

.modal-mobile-layout {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  &--fullscreen {
    padding: 0;
  }

  & &__container {
    max-height: 100%;
    width: 100%;
    position: relative;
    background-color: var(
      --wds-color-fill-surface-default,
      var(--wsr-color-D80, #ffffff)
    );
    display: flex;
    flex-direction: column;
  }

  &:not(#{&}--fullscreen) &__container {
    box-shadow: var(--wds-shadow-x-primary-modal, 0)
        var(--wds-shadow-x-primary-modal, 9px)
        var(--wds-shadow-blur-primary-modal, 24px) 0
        var(--wds-shadow-fill-primary-modal, #0000004d),
      0 var(--wds-shadow-y-secondary-modal, 0)
        var(--wds-shadow-blur-secondary-modal, 0) 0
        var(--wds-shadow-fill-primary-modal, #0000004d);
    border-radius: 8px;
    border: var(--wds-border-width-surface-modal, 0) solid
      var(--wds-color-border-surface-modal, transparent);
  }

  &--fullscreen &__container {
    height: 100%;
  }

  & &__close {
    position: absolute;
    right: 12px;
    top: 18px;
    z-index: 1000;
  }

  &--fullscreen &__close {
    top: 12px;
  }

  & &__content {
    overflow: auto;
    position: relative;
    padding: 0 24px;
    box-sizing: border-box;

    &::-webkit-scrollbar {
      height: 0;
      width: $scrollbar-track-width;
    }

    &::-webkit-scrollbar-button {
      display: none;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-scrollbar-fill,
        var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff))
      );
      background-clip: content-box;
      border-radius: var(--wds-border-radius-full, calc(3px * 2));
      border: calc(
          (#{$scrollbar-track-width} - var(--wds-scrollbar-width, 6px)) / 2
        )
        solid transparent;
      height: 72px;
    }

    @media (hover: hover) {
      &::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-scrollbar-fill-hover,
          var(--wds-color-blue-200, var(--wsr-color-B20, #5999ff))
        );
      }
    }

    &::-webkit-scrollbar-thumb:active {
      background-color: var(
        --wds-scrollbar-fill-active,
        var(--wds-color-blue-100, var(--wsr-color-B10, #116dff))
      );
    }
  }

  &--no-title &__content {
    padding-top: 24px;
  }

  &--no-footer &__content {
    padding-bottom: 24px;
  }

  & &__title {
    padding: 24px 0 18px;

    &--is-sticky {
      padding: 24px 24px 18px;
    }
  }

  & &__footer {
    padding: 24px 0;

    &--is-sticky {
      padding: 24px;
    }
  }

  /* Sticky title with close button: extra right padding to clear the close button */
  & &__close ~ &__title {
    padding-right: 48px;
  }

  /* Non-sticky title (inside the content) with close button: add right padding */
  & &__close ~ &__content &__title {
    padding-right: 24px;
  }
}