@import "start";

#fs_customizer_upsell {
    .fs-customizer-plan {
        padding: 10px 20px 20px 20px;
        border-radius: 3px;
        background: #fff;

        h2 {
            position: relative;
            margin: 0;
            line-height: 2em;
            text-transform: uppercase;

            .button-link {
                top: -2px;
            }
        }
    }

    .fs-feature {
        position: relative;
    }

    .dashicons-yes {
        color: #0085ba;
        font-size: 2em;
        vertical-align: bottom;
        margin-left: -7px;
        margin-right: 10px;

        .rtl & {
            margin-left: 10px;
            margin-right: -7px;
        }
    }

    .dashicons-editor-help
    {
        color:  #bbb;
        cursor: help;

        $tooltip-color: #000;

        .fs-feature-desc {
            opacity:       0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out;

            position:      absolute;
            background:    $tooltip-color;
            color:         #fff;
            font-family:   'arial', serif;
            font-size:     12px;
            padding:       10px;
            z-index:       999999;
            bottom:        100%;
            margin-bottom: 5px;
            left:          0;
            right:         0;
            border-radius: 5px;
            box-shadow:    1px 1px 1px rgba(0,0,0,0.2);
            line-height:   1.3em;
            font-weight:   bold;
            text-align:    left;

            .rtl &
            {
                text-align: right;
            }

            &::after {
                content: ' ';
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 5px 5px 0 5px;
                border-color: $tooltip-color transparent transparent transparent;
                position: absolute;
                top: 100%;
                left: 21px;

                .rtl & {
                    right: 21px;
                    left: auto;
                }
            }
        }

        &:hover {
            .fs-feature-desc {
                visibility: visible;
                opacity: 1;
            }
        }
    }

    .button-primary {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
}

#fs_customizer_support
{
    display: block !important;

    .button {
        float: right;
    }

    .button-group {
        width: 100%;
        display: block;
        margin-top: 10px;

        .button {
            float: none;
            width: 50%;
            text-align: center;
        }
    }
}

#customize-theme-controls #accordion-section-freemius_upsell
{
    border-top:    1px solid $wp-button-primary-background-color !important;;
    border-bottom: 1px solid $wp-button-primary-background-color !important;;

    h3.accordion-section-title
    {
        color:            $wp-button-primary-color;
        background-color: $wp-button-primary-background-color;
        border-left:      4px solid $wp-button-primary-background-color;
        transition:       .15s background-color ease-in-out, .15s border-color ease-in-out;
        outline:          none;
        border-bottom:    none !important;

        &:hover
        {
            background-color:  $wp-button-primary-hover-background-color;
            border-left-color: $wp-button-primary-active-background-color;
        }

        &:after {
            color: $wp-button-primary-color;
        }
    }

    .rtl
    {
        h3.accordion-section-title
        {
            border-left:  none;
            border-right: 4px solid $wp-button-primary-background-color;

            &:hover
            {
                border-right-color: $wp-button-primary-active-background-color;
            }
        }
    }
}
