front_end/panels/common/gdpSignUpDialog.css

/*
 * Copyright 2025 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);
    }

    .gdp-sign-up-dialog-header {
        background-image: var(--image-file-gdp-logo-light);
        height: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0;

        &:focus-visible {
            outline: 2px solid var(--sys-color-state-focus-ring);
        }
    }

    :host-context(.theme-with-dark-background) & .gdp-sign-up-dialog-header {
        background-image: var(--image-file-gdp-logo-dark);
    }

    .main-content {
        display: flex;
        flex-direction: column;
        margin: var(--sys-size-6) 0;
        gap: var(--sys-size-3);
    }

    .section {
        display: flex;
        gap: var(--sys-size-6);
        padding: 12px 16px 12px 12px;
        background-color: var(--sys-color-surface4);
        align-self: stretch;
    }

    .icon-container {
        flex-shrink: 0;
    }

    .section:first-child {
        border-top-left-radius: var(--sys-shape-corner-medium-small);
        border-top-right-radius: var(--sys-shape-corner-medium-small);
    }

    .section:last-child {
        border-bottom-left-radius: var(--sys-shape-corner-medium-small);
        border-bottom-right-radius: var(--sys-shape-corner-medium-small);
    }

    .section .icon-container devtools-icon {
        width: var(--sys-size-8);
        height: var(--sys-size-8);
    }

    .text-container {
        display: flex;
        flex-direction: column;
    }

    .section-title {
        margin: 0;
        font: var(--sys-typescale-body4-medium);
        color: var(--sys-color-on-surface);
    }

    .section-text {
        font: var(--sys-typescale-body4-regular);
        color: var(--sys-color-on-surface-subtle);
        line-height: 18px;
    }

    .switch-container {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

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