/* Copyright 2024 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-lit
* #import=../demo.css.js
* #import=//resources/cr_elements/cr_shared_vars.css.js
* #scheme=relative
* #include=demo
* #css_wrapper_metadata_end */
:host {
--spinner-size: 28px;
}
.spinner {
mask-image: url(//resources/images/throbber_small.svg);
mask-position: center;
mask-repeat: no-repeat;
mask-size: var(--spinner-size) var(--spinner-size);
background-color: var(--google-blue-500);
height: var(--spinner-size);
width: var(--spinner-size);
}
@media (prefers-color-scheme: dark) {
.spinner {
background-color: var(--google-blue-300);
}
}
cr-progress {
--cr-progress-active-color: var(--google-blue-500);
}
@media (prefers-color-scheme: dark) {
cr-progress {
--cr-progress-active-color: var(--google-blue-300);
}
}
#gradientWithBorder {
border: solid 1px var(--google-blue-300);
border-radius: 16px;
box-sizing: border-box;
padding: 16px;
width: 100%;
}
#customColors {
--cr-loading-gradient-color-start: cyan;
--cr-loading-gradient-color-middle: gold;
--cr-loading-gradient-color-end: hotpink;
}