/* 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. */
.text-button {
box-sizing: border-box;
font: var(--cros-button-2-font);
height: 32px;
padding: 0 16px;
}
.text-button.pill {
border-radius: var(--border-radius-rounded-with-short-side);
}
button.text-button.pill:focus {
outline-offset: 2px;
}
.text-button.pill {
border-radius: var(--border-radius-rounded-with-short-side);
}
.text-button.dark.primary {
background: var(--cros-sys-primary);
color: var(--cros-sys-on_primary);
}
.text-button.dark.primary:hover {
/* Use linear-gradient to apply multiple background colors. */
background: linear-gradient(
0deg,
var(--cros-sys-hover_on_prominent),
var(--cros-sys-hover_on_prominent)
), var(--cros-sys-primary);
}
.text-button.dark:is(.secondary, .system-secondary) {
background: var(--cros-sys-primary_container);
color: var(--cros-sys-on_primary_container);
:is(svg-wrapper) {
color: var(--cros-sys-on_primary_container);
}
&:hover {
background: linear-gradient(
0deg,
var(--cros-sys-hover_on_subtle),
var(--cros-sys-hover_on_subtle)
), var(--cros-sys-primary_container);
}
}
.icon-button {
border-radius: 12px;
}
button.icon-button.dark:hover {
background: var(--cros-sys-hover_on_subtle);
}