<style include="cr-hidden-style">
:host {
display: flex;
justify-content: center;
--ntp-module-container-padding-top: 16px;
}
.action-button {
--cr-button-text-color: var(--color-new-tab-page-action-button-foreground);
--cr-button-background-color: var(--color-new-tab-page-action-button-background);
margin-inline-end: 8px;
margin-top: 18px;
}
.cancel-button {
--cr-button-text-color: var(--color-new-tab-page-button-foreground);
}
ntp-module-wrapper {
width: var(--ntp-module-width);
}
.module-container + .module-container {
padding-top: var(--ntp-module-container-padding-top);
}
#modules {
max-width: 100%;
width: fit-content;
}
#removeModuleToastMessage {
flex-grow: 1;
}
:host([drag-enabled_]) ntp-module-wrapper {
cursor: grab;
}
[dragging] {
pointer-events: none;
position: fixed;
z-index: 2;
}
</style>
<div id="modules"></div>
<cr-toast id="removeModuleToast" duration="10000">
<div id="removeModuleToastMessage">[[removedModuleData_.message]]</div>
<template is="dom-if" if="[[removedModuleData_.undo]]">
<cr-button id="undoRemoveModuleButton"
aria-label="$i18n{undoDescription}"
on-click="onUndoRemoveModuleButtonClick_">
$i18n{undo}
</cr-button>
</template>
</cr-toast>