/* Copyright 2022 The Matrix.org Foundation C.I.C.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
@import "@vector-im/compound-web/dist/style.css";
@import "./styles/cpd-button.css";
@import "./styles/cpd-form.css";
@import "./styles/cpd-link.css";

@config "../tailwind.templates.config.cjs";

@tailwind base;
@tailwind components;
@tailwind utilities;

.cpd-text-body-lg-regular {
    font: var(--cpd-font-body-lg-regular);
    letter-spacing: var(--cpd-font-letter-spacing-body-lg);
}

.cpd-text-heading-xl-semibold {
    font: var(--cpd-font-heading-xl-semibold);
    letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
}

.cpd-text-body-md-regular {
    font: var(--cpd-font-body-md-regular);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

.cpd-text-primary {
    color: var(--cpd-color-text-primary);
}

.cpd-text-secondary {
    color: var(--cpd-color-text-secondary);
}

.consent-client-icon {
    display: block;
    height: var(--cpd-space-16x);
    width: var(--cpd-space-16x);
    margin: 0 auto;

    &.generic {
        background-color: var(--cpd-color-bg-subtle-secondary);
        border-radius: var(--cpd-radius-pill-effect);
        color: var(--cpd-color-icon-primary);

        & svg {
            margin: var(--cpd-space-4x);
            height: var(--cpd-space-8x);
            width: var(--cpd-space-8x);
        }
    }

    &.image {
        height: var(--cpd-space-16x);
        width: var(--cpd-space-16x);
        border-radius: var(--cpd-space-2x);
        overflow: hidden;
    }
}

.consent-scope-list {
    --border-radius: var(--cpd-space-4x);
    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--cpd-space-1x);

        & > li {
            font: var(--cpd-font-body-md-regular);
            letter-spacing: var(--cpd-font-letter-spacing-body-md);
            color: var(--cpd-color-text-primary);

            background-color: var(--cpd-color-bg-subtle-secondary);
            padding: var(--cpd-space-3x) var(--cpd-space-5x);
            display: flex;
            gap: var(--cpd-space-4x);
            line-height: var(--cpd-space-6x);

            &:first-of-type {
                border-top-left-radius: var(--border-radius);
                border-top-right-radius: var(--border-radius);
            }

            &:last-of-type {
                border-bottom-left-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }

            & > p {
                flex: 1;
            }

            & > svg {
                display: block;
                height: var(--cpd-space-6x);
                width: var(--cpd-space-6x);
                color: var(--cpd-color-icon-quaternary);
            }
        }
    }
}