/*!
 * 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='onboarding-v4'] {
     .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, #UITourTooltipTitleContainer, #UITourTooltipClose, #UITourTooltipButtons {
         margin: 0;
         padding: 0;

         #UITourTooltipTitle, #UITourTooltipIcon {
             display: none;
         }

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

     #UITourTooltipTitleContainer {
         -moz-box-pack: end;
         margin-left: 7px;
     }

     #UITourTooltipButtons {
         background-color: transparent;
         border-top: none;
         -moz-box-pack: start;
         margin-top: 18px;

         .button-primary, .button-link {
             margin: 0;
             padding: 8px;
             border-radius: 3px;
             cursor: pointer;

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

         .button-primary {
             background-color: #fff;
             color: $cliqz-blue-color;
             border-color: #fff;

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

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

         .button-link {
             margin-left: 18px;
             color: $cliqz-blue-color;
             border: 1px solid transparent;
             -moz-appearance: none;

             &:hover {
                 border-color: $cliqz-blue-color
             }
         }
     }

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

         & > .toolbarbutton-icon {
             width: 13px;
             height: 13px;
         }

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