import { html } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import 'chrome://resources/cr_elements/cr_shared_style.css.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import '../../settings_shared.css.js';
import '../../settings_columned_section.css.js';
const styleMod = document.createElement('dom-module');
styleMod.appendChild(html `
  <template>
    <style include="cr-shared-style settings-shared settings-columned-section">

:host {
  display: block;
  flex: 1;
  padding: 0 24px;
}

.welcome-completion-header {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.welcome-completion-header picture {
  animation: fade-in 1500ms, slide-in 300ms;
}

.welcome-completion-header-label {
  align-self: center;
  color: var(--google-grey-800);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  justify-content: center;
  outline: none;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  .welcome-completion-header-label {
    color: var(--google-grey-200);
  }
}

.settings-fragment-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  outline: none;
  padding: 24px 0 16px 0;
}

.settings-fragment-header-label {
  animation: fade-in var(--privacy-guide-animation-duration);
  align-self: center;
  color: var(--cr-primary-text-color);
  font-size: 138%;  /* Should be 18px when 100% is 13px. */
  font-weight: 400;
  justify-content: center;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide-in {
  0% {
    transform: translateX(calc(
        var(--privacy-guide-translate-multiplier) * 20px));
  }

  100% {
    transform: translateX(0);
  }
}

.welcome-completion-header-label,
.cr-secondary-text,
.settings-fragment-header picture,
.fragment-content {
  animation: fade-in var(--privacy-guide-animation-duration),
      slide-in 450ms;
}

.embedded-setting-wrapper {
  border: 1px solid var(--google-grey-300);
  border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  .embedded-setting-wrapper {
    border-color: var(--google-grey-700);
  }
}

settings-collapse-radio-button:not(:first-of-type) {
  --settings-collapse-separator-line: var(--cr-separator-line);
}

settings-toggle-button {
  padding-bottom: 8px;
  padding-top: 8px;
}

picture {
  align-items: center;
  display: flex;
}
    </style>
  </template>
`.content);
styleMod.register('privacy-guide-fragment-shared');
