/*
 * Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
  :scope {
    width: 100%;
    box-shadow: none;
    padding: var(--sys-size-8);
    background-color: var(--sys-color-surface);
    border-radius: var(--sys-shape-corner-medium);
  }

  .opt-in-change-dialog {
    width: var(--sys-size-33);
    max-width: 100%;
  }

  header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sys-size-8);
    margin-bottom: var(--sys-size-8);

    h2 {
      margin: 0;
      color: var(--sys-color-on-surface);
      font: var(--sys-typescale-headline5);
    }

    .header-icon-container {
      background: linear-gradient(
        135deg,
        var(--sys-color-gradient-primary),
        var(--sys-color-gradient-tertiary)
      );
      border-radius: var(--sys-size-4);
      height: var(--sys-size-14);
      width: var(--sys-size-14);
      display: flex;
      align-items: center;
      justify-content: center;

      devtools-icon {
        width: var(--sys-size-9);
        height: var(--sys-size-9);
        color: var(--sys-color-on-primary);
      }
    }
  }

  main {
    background-color: var(--sys-color-surface4);
    border-radius: var(--sys-shape-corner-medium-small);
    padding: var(--sys-size-8);
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-6);
    margin-bottom: var(--sys-size-8);

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--sys-size-8);

      devtools-icon {
        width: var(--sys-size-8);
        height: var(--sys-size-8);
        flex-shrink: 0;
        color: var(--sys-color-on-surface-subtle);
      }

      .text {
        font: var(--sys-typescale-body4);
        color: var(--sys-color-on-surface);
      }
    }
  }

  footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    .right-buttons {
      display: flex;
      gap: var(--sys-size-5);
    }
  }
}