/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/*
 * UI TOUR CUSTOMIZATION
 */
$cliqz-blue-color: #00AEF0;

#UITourTooltip[targetName='video-downloader'], #UITourTooltip[targetName='downloads-button'] {
    .panel-arrow {
        position: relative;
        margin-top: 5px;
        margin-bottom: -13px;
        width: 18px;
        height: 18px;
        background: $cliqz-blue-color;
        transform: rotate(45deg);
        list-style-image: none;
    }

    .panel-arrowcontent {
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
        position: relative;
        color: #fff;
        background: $cliqz-blue-color;
        box-shadow: none;
        border: none;
        border-radius: unset;
    }

    #UITourTooltipBody {
        #UITourTooltipIcon {
            margin-top: 0;
            width: 24px;
            height: 24px;
        }

        #UITourTooltipTitle {
            font-size: 18px;
            font-weight: 500;
        }

        #UITourTooltipDescription {
            font-size: 14px;
            line-height: 18px;
            font-weight: 400;
            max-width: 22rem;
        }
    }

    #UITourTooltipButtons {
        background-color: transparent;
        border-top: none;
        -moz-box-pack: start;
        padding: 7px 16px 18px 50px;
        margin-left: -16px;

        button:not(.button-primary):not(.button-link) {
            margin: 0 2px 0 0;
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: transparent;
            cursor: pointer;
            outline: none;
            line-height: 2.8rem;
            width: 120px;
            height: 55px;
            border-color: transparent;
            border-radius: 6px;

            .button-text {
                visibility: hidden;
            }

            &:hover {
                border-color: #fff;
            }
        }

        .button-primary {
            margin: 0;
            padding-left: 8px;
            padding-right: 10px;
            background-color: #fff;
            color: $cliqz-blue-color;
            border-color: #fff;
            cursor: pointer;

            .button-text {
                font-size: 14px;
                font-weight: 600;
                margin-inline-start: 0;
                margin-inline-end: 0;
            }

            &:hover {
                background-color: $cliqz-blue-color;
                color: #fff;
            }
        }

        .button-link {
            padding: 4px 10px 4px 8px;
            margin: 0 0 0 10px;
            color: $cliqz-blue-color !important;
            min-width: 20px;
            border-radius: 3px;
            border: 1px solid transparent;
            cursor: pointer;
            -moz-appearance: none;

            .button-text {
                font-size: 14px;
            }

            &:hover {
                border-color: $cliqz-blue-color !important;
            }
        }
    }

    .close-icon {
        cursor: pointer;
        list-style-image: url("../images/close-icon.svg");
        opacity: 0.6;
        -moz-image-region: rect(0, 16px, 16px, 0);

        &:hover {
            opacity: 1;
            -moz-image-region: rect(0, 16px, 16px, 0);
        }
    }

    @media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista),
    (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
        .panel-arrowcontent {
            padding-right: 10px;
        }

        #UITourTooltipBody {
            #UITourTooltipDescription {
                padding-right: 6px;
            }
        }

        .close-icon {
            margin-inline-end: -10px;
            margin-top: -10px;
        }
    }
}

#UITourTooltip[targetName='downloads-button'] {
    #UITourTooltipButtons {
        padding-left: 16px;
    }
}
