// Campaign Builder Preview styles.
//
// Basic styles.
//
// @since 1.8.0

// Template name
$template: 'basic-blue';

// Colors by name:

$color_theme_primary:   #3418d2;
$color_theme_secondary: #005eff;
$color_theme_tertiary:  #00a1ff;
$color_theme_accent:    #7cb3c5;
$color_button_bg:       #3418d2;

@import '../frontend/partials/template-basic';

.charitable-campaign-wrap.template-basic.template-basic-blue {

    .charitable-campaign-container {

        .charitable-field-preview-headline {
            color: $color_theme_primary;
        }

        /* fields */

        .charitable-campaign-field {

            /* title */
            // note: it's an h5 in preview, but h1 here.
            &.charitable-campaign-field_campaign-title {
                h1 {
                    margin: 0 0 10px 0;
                    padding: 0;
                    font-weight: 800;
                    font-size: 24px;
                    line-height: 32px;
                    color: $color_theme_primary;
                }
            }

            /* photo */
            &.charitable-campaign-field-photo {

                .charitable-campaign-primary-image {

                    img {
                        border: 5px solid $color_theme_primary;
                    }

                }

            }

            &.charitable-campaign-field_campaign-summary {


                .campaign-summary-item {
                    padding: 5px;
                    width: -webkit-calc(50% - 10px);
                    width:    -moz-calc(50% - 10px);
                    width:         calc(50% - 10px);
                    span,
                    .amount,
                    .donors-count {
                        color: $color_theme_primary;
                    }
                }
            }

            &.charitable-campaign-field_donate-button {
                text-align: center;
                a.donate-button.button-primary {
                    &:hover {
                        color: $color_white;
                    }
                    color: $color_white;
                    text-decoration: none;
                    display: block;
                    padding: 6px 24px;
                    margin: 10px auto;
                    width: auto;
                }
                .donate-button.button-primary {
                    background-color: $color_button_bg;
                }
            }

        }

        /* base tabs */

        // nav.charitable-campaign-preview-nav {
        //     margin: 20px auto;
        //     a {
        //         text-decoration: none;
        //     }
        //     ul {
        //         list-style: none;
        //         margin-block-end: 0;
        //         margin-block-start: 0;
        //         margin-inline-end: 0;
        //         margin-inline-start: 0;
        //         padding: 0;
        //     }
        //     li {
        //         display: inline-block;
        //         margin: 0 20px 0 0;
        //         text-transform: uppercase;
        //         font-weight: 500;
        //         color: #2d2d2d;
        //         padding-bottom: 15px;
        //         &.active {
        //             border-bottom: 1px solid #2d2d2d;
        //         }
        //     }

        //     &.tab-size-medium {
        //         li {
        //             a {
        //                 font-size: 14px;
        //                 padding: 15px;
        //             }
        //         }
        //     }

        // }
        // .tab-content {
        //     ul {
        //         list-style: none;
        //         margin-block-end: 0;
        //         margin-block-start: 0;
        //         margin-inline-end: 0;
        //         margin-inline-start: 0;
        //         padding: 0;
        //     }
        //     li {
        //         display: none;
        //         &.active {
        //             display: block;
        //         }
        //     }
        // }

    }

}