<!--
Copyright 2015 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<style>
.container {
--cr-toast-background: var(--cros-sys-base_elevated);
--cr-toast-button-color: var(--cros-sys-primary);
--cr-toast-text-color: var(--cros-sys-on_surface);
border-radius: 8px;
box-shadow: var(--cros-elevation-2-shadow);
font: var(--cros-body-2-font);
justify-content: space-between;
max-width: 336px;
min-height: 48px;
min-width: 256px;
padding: 14px 0;
}
:host-context(:root[dir=ltr]) .container {
left: unset;
right: 0;
}
:host-context(:root[dir=rtl]) .container {
left: 0;
right: unset;
}
.text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
margin-inline-start: 24px;
overflow: hidden;
}
.action {
--ink-color: var(--cros-sys-ripple_neutral_on_subtle);
--paper-ripple-opacity: 100%;
border-radius: 18px;
height: 36px;
margin-inline-end: 12px;
}
.action:active {
box-shadow: none;
}
:host-context(.focus-outline-visible) .action:focus {
--focus-shadow-color: none;
outline: 2px solid var(--cros-sys-focus_ring);
}
</style>
<cr-toast class="container" id="container" duration="5000">
<div class="text" id="text"></div>
<cr-button class="action" id="action" on-click="onActionClicked_"></cr-button>
</cr-toast>