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

html,
body,
#contents,
#signin-frame {
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#signin-frame,
#spinner-container {
  background-color: var(--cr-card-background-color);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#spinner-container {
  align-items: center;
  display: flex;
  justify-content: center;
}

#contents:not(.loading) #spinner-container {
  display: none;
}

#navigation-button {
  background: white;
  bottom: 32px;
  left: 32px;
  padding-inline-start: 10px;
  position: absolute;
  visibility: hidden;
}

:host-context([dir='rtl']) #navigation-button {
  left: auto;
  right: 32px;
}

#navigation-button.enabled {
  visibility: visible;
}

/* On Chrome OS, we need to shift the webview a bit to accommodate the Back
 * button at the bottom.
 */
<if expr="chromeos">
#contents,
#signin-frame {
  height: calc(100% - 96px);
}

@media (max-width: 767px) {
  #contents,
  #signin-frame {
    height: calc(100% - 80px);
  }

  #navigation-button {
    bottom: 24px;
    left: 24px;
  }

  :host-context([dir='rtl']) #navigation-button {
    left: auto;
    right: 24px;
  }
}
</if>
