/* Copyright 2022 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=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=./signin_vars.css.js
 * #css_wrapper_metadata_end */

:host {
  --scrollbar-background: var(--google-grey-100);
  --scrollbar-width: 4px;
}

a {
  color: var(--cr-link-color);
  text-decoration: none;
}

.container {
  color: var(--cr-primary-text-color);
  width: 448px;
}

.top-title-bar {
  align-items: center;
  border-bottom: var(--cr-separator-line);
  display: flex;
  font-size: 16px;
  height: 52px;
  padding: 0 24px;
}

.action-container {
  column-gap: 8px;
  display: flex;
  justify-content: flex-end;
  padding: var(--action-container-padding);
}

.custom-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: var(--scrollbar-width);
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-background);
  border-radius: var(--scrollbar-width);
}

<if expr="is_macosx or is_linux or is_chromeos">
.action-container {
  flex-flow: row-reverse;
  justify-content: flex-start;
}
</if>

@media (prefers-color-scheme: dark) {
  :host {
    --scrollbar-background: var(--google-grey-800);
  }
}