@import (reference) '@servicetitan/tokens/dist/tokens.less';

.preview {
    max-width: 600px;
    margin: @spacing-0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: @spacing-2 @spacing-0;
    min-height: 400px;
    max-height: 70vh;

    .card {
        background: @color-neutral-10;
        border: 1px solid @color-neutral-60;
        border-radius: @border-radius-2;
        padding: @spacing-5;
        width: 100%;
        box-sizing: border-box;

        .title {
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 30px;
            line-height: 34px;
            color: @color-neutral-400;
            margin-bottom: @spacing-0;
        }

        .text {
            font-family: Helvetica, sans-serif;
            font-size: @typescale-4;
            line-height: 23px;
            color: @color-neutral-200;
            margin-top: 20px;
            margin-bottom: @spacing-0;
        }

        .button {
            background: @color-blue-400;
            border-radius: 4px;
            font-family: Helvetica, sans-serif;
            font-size: @typescale-4;
            line-height: 23px;
            text-align: center;
            color: @color-neutral-0;
            padding: 13px @spacing-2;
            cursor: pointer;
            margin-top: 30px;
            display: inline-block;
        }

        .footer {
            font-family: Helvetica, sans-serif;
            font-size: @typescale-3;
            line-height: 18px;
            color: @color-neutral-200;
            margin-top: 30px;
            margin-bottom: @spacing-0;
        }
    }
}