@import '../../../../../styles/variables';

$width: 610px;
$supported-width: 1.1 * $width;
$supported-height: 400px;
$button-height: 32px;

// tweak button so primary button and its clickable area is larger and secondary button is smaller
$primary-button-padding: 24px;
$secondary-button-padding: 0;
$secondary-button-margin-right: 15px;

.bdl-PreviewTitleBodyTwoButtonsPopoutTemplate {
    // media css should be in its separate file as convention, but this is an exception as this particular
    // media css here only applies to this template.
    @media only screen and (max-width: $supported-width - 1px) {
        display: none;
    }

    @media only screen and (max-height: $supported-height - 1px) {
        display: none;
    }

    letter-spacing: 0.3px;

    .overlay {
        border: 1px solid $bdl-gray-10;
        border-radius: 2px;

        .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-contentContainer {
            display: flex;
            width: $width;
            padding: 30px;

            .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-previewContainer {
                display: flex;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;

                .MessagePreviewContent {
                    width: 170px;
                    height: 170px;

                    .MessagePreviewGhost-ghost {
                        max-height: 170px;
                    }
                }

                .bp-container {
                    min-width: 170px;
                }
            }

            .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-mainContainer {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                justify-content: space-around;
                min-width: 50%;
                margin-left: 30px;
                line-height: 20px;

                .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-title {
                    margin: 0;
                    margin-bottom: 16px;
                    font-weight: bold;
                    font-size: 15px;
                    word-wrap: break-word;
                }

                .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-body {
                    font-size: 13px;

                    a {
                        font-weight: bold;
                    }
                }

                .bdl-PreviewTitleBodyTwoButtonsPopoutTemplate-buttons {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    margin-top: 16px;

                    .btn {
                        height: $button-height;
                        margin-top: 0;
                        margin-bottom: 0;
                        border-width: 0;

                        &:not(.btn-primary) {
                            margin-right: $secondary-button-margin-right;
                            padding-right: $secondary-button-padding;
                            padding-left: $secondary-button-padding;
                            color: $bdl-box-blue;

                            &:not(.is-disabled):hover {
                                background-color: inherit;
                            }
                        }

                        &.btn-primary {
                            padding-right: $primary-button-padding;
                            padding-left: $primary-button-padding;
                        }
                    }
                }
            }
        }
    }
}