$scrollbar-track-width: 12px;
$spacing-2: calc(var(--wds-space-100, 6px) * 2);

.message-box-functional-layout {
  min-width: 510px;
  max-width: min-content;
  box-shadow: var(
    --wsr-shadow40,
    0 8px 8px 0 rgba(22, 45, 61, 0.12),
    0 3px 24px 0 rgba(22, 45, 61, 0.18)
  );
  border-radius: 8px;
  background-color: white;

  &--has-image {
    min-width: 600px;
  }

  &--fullscreen {
    display: flex;
    flex-direction: column;
    max-width: 1254px;
    height: calc(100% - 48px * 2);
    width: calc(100% - 48px * 2);
  }

  & &__top-area-container {
    display: flex;
    overflow-y: auto;
    position: relative;
  }

  & &__content-area-container {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  & &__image-container {
    margin: 18px 0 0 24px;
    max-height: 120px;
    max-width: 120px;
    overflow: hidden;
  }

  // Header and footer slots stay unscoped: ModalSelectorLayout renders
  // HeaderLayout and FooterLayout under its own root.
  &__header {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 60px;
    padding: 18px 24px;
    border-radius: 8px 8px 0px 0px;
  }

  & &__content {
    font-family: var(
      --wds-font-family-default,
      var(
        --wsr-font-family,
        Madefor,
        'Helvetica Neue',
        Helvetica,
        Arial,
        'メイリオ',
        'meiryo',
        'ヒラギノ角ゴ pro w3',
        'hiragino kaku gothic pro',
        sans-serif
      )
    );
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    line-height: var(
      --wds-font-line-height-body-medium,
      var(--wsr-text-line-height-medium, 24px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    padding: 0 24px 8px;
    box-sizing: border-box;

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

    &--fullscreen {
      height: 100%;
      margin-bottom: auto;
      overflow: auto;
    }

    &--no-footer {
      padding-bottom: 42px;
    }

    &--with-empty-state {
      padding: 42px 20px;
    }
  }

  & &__content--scrollable {
    overflow-y: auto;

    &::-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))
      );
    }
  }

  & &__content--footer-border:not(#{&}__content--no-footer) {
    border-bottom: 1px solid
      var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  }

  &__footer {
    padding: 18px 24px;
    display: flex;
    align-items: center;
  }

  &__footer-buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;

    &--with-side-actions {
      padding-left: 24px;
    }

    > :first-of-type:not(:last-of-type) {
      margin-right: 12px;
    }
  }

  &__bottom-children {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    border-radius: 0 0 8px 8px;
    background-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
    padding: 12px 24px;
    margin-top: 0;
    box-sizing: border-box;
  }

  &__control-buttons {
    position: absolute;
    right: $spacing-2;
    top: $spacing-2;
  }
}