/* Copyright 2021 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/* #css_wrapper_metadata_start
 * #type=style
 * #import=../oobe_vars/oobe_custom_vars.css.js
 * #import=../oobe_vars/oobe_shared_vars.css.js
 * #import=./oobe_common_styles.css.js
 * #include=oobe-common-styles
 * #css_wrapper_metadata_end */

        :host(:not([hidden])) {
          display: flex;
          min-height: 0;
        }

        :host {
          border-radius: 4px;
          box-shadow: unset;
          flex-direction: column;
          height: 100%;
          min-height: 0;
          position: relative;
          width: 100%;
        }

        .oobe-illustration {
          max-height: 100%;
          max-width: 100%;
          object-fit: contain;
        }

        .illustration-jelly {
          width: 100%;
          height: 100%;
        }

        .oobe-tos-webview {
          border: 1px solid var(--cros-app-shield-color);
          border-radius: 4px;
          padding: 13px 0;
        }

        :host-context(.jelly-enabled) .oobe-tos-webview {
          border: medium none white;
          border-radius: 16px;
          overflow: hidden;
          padding: 0;
        }

        /* Center-align both vertically and horizontally */
        .content-centered {
          margin: auto;
        }

        @media (orientation: landscape) {
          /* Center-align vertically in landscape mode */
          .landscape-vertical-centered {
            margin: auto 0;
          }

          /* Align with header in landscape mode */
          .landscape-header-aligned {
            padding-top: calc(var(--oobe-adaptive-dialog-header-top-padding)
                + var(--oobe-adaptive-dialog-icon-size)
                + var(--oobe-adaptive-dialog-title-top-padding));
          }
          :host-context(.jelly-enabled) .landscape-header-aligned {
            padding-top: calc(var(--oobe-adaptive-dialog-icon-size)
                + var(--oobe-adaptive-dialog-item-vertical-padding));
          }
        }

        @media (orientation: portrait) {
          :host-context(.jelly-enabled) .landscape-header-aligned {
            padding-top: var(--oobe-adaptive-dialog-item-vertical-padding);
          }

          /* TODO(b/268463435) Remove during Jelly cleanup */
          /* Center-align horizontally in portrait mode */
          .portrait-horizontal-centered {
            margin: 0 auto;
          }
        }