/*
 * This file is part of AdBlock  <https://getadblock.com/>,
 * Copyright (C) 2013-present  Adblock, Inc.
 *
 * AdBlock is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * AdBlock is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with AdBlock.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "../adblock.css";
@import "../adblock-color-themes.css";

/* GENERAL */

body {
  color: var(--popup-main-text-color);
  background-color: var(--popup-background-color);
}

body::-webkit-scrollbar {
  display: none;
}

#wrapper {
  font-size: 15px;
  margin: 0px 0px 20px 0px;
  width: 320px;
  max-height: 606px;
}

.separator {
  height: 1px;
  background-color: var(--popup-separator-color);
  opacity: 0.5;
  margin: 0px;
}

.right {
  float: right;
}

.left {
  float: left;
}

/* HEADER */

.header-logo {
  cursor: pointer;
  height: 32px;
  width: auto;
}

#premium_status_msg {
  display: none;
  font-weight: bold;
  font-size: 8px;
  margin-right: 8px;
  padding-left: 3px;
  padding-right: 3px;
  line-height: 16px;
  border: 0.5px solid var(--popup-accent-color);
  border-radius: 2px;
  background-color: var(--popup-accent-color);
  color: var(--premium-badge-text-color);
  text-transform: uppercase;
  cursor: pointer;
}

#header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header-icons {
  width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

#header-icons .material-icons {
  color: var(--popup-accent-color);
}

#header-icons .material-icons:hover {
  color: var(--popup-accent-hovered-color);
}

#premium_status_msg:hover {
  border-color: var(--popup-accent-hovered-color);
  background-color: var(--popup-accent-hovered-color);
}

#header-icons .material-icons:focus {
  outline: var(--popup-url-text-color) auto 5px;
  opacity: 1;
}

#help-icon-tooltip,
#options-icon-tooltip,
#more-icon-tooltip {
  padding: 8px;
  display: none;
  top: 32px;
  position: absolute;
  z-index: 100;
  min-width: 40px;
  height: 18px;
  font-size: 10px;
  font-weight: bold;
  line-height: 150%;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 4px;
}

#help-icon-tooltip {
  transform: translateX(-20%);
}

#options-icon-tooltip {
  right: -12px;
}

#more-icon-tooltip {
  transform: translateX(2rem);
}

#help_link:hover ~ #help-icon-tooltip,
#svg_options:hover ~ #options-icon-tooltip,
#filtering_options_wrapper:hover ~ #more-icon-tooltip {
  display: flex;
}

#filtering_options_wrapper.disabled {
  opacity: 50%;
  pointer-events: none;
}

#filtering_options_wrapper.disabled:hover {
  cursor: not-allowed;
}

#titletext {
  margin: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#help_link {
  margin-right: 2px;
}

#primary_section {
  display: none;
}

.primary_section {
  width: 288px;
  background-color: var(--popup-card-background-color);
  margin-left: 16px;
  margin-right: 16px;
  padding: 0 1rem 0.25rem;
  border-radius: 4px;
}

a {
  color: var(--popup-link-text);
  text-decoration: var(--popup-link-text-decoration);
}

/* PREMIUM CTAs */
.premium-cta {
  display: flex;
  align-items: stretch;
  padding: 0;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 12px;
  background-color: var(--popup-card-background-color);
  border-radius: 4px;
  min-height: 36px;
}

.premium-cta .cta-message {
  margin-left: 8px;
}

.premium-cta:hover .cta-message > span,
.premium-cta:hover .dc-cta-message > span {
  display: none;
}

.premium-cta:hover .cta-message::after,
.premium-cta:hover .dc-cta-message::after {
  font-weight: bold;
}

.cta-description {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  cursor: pointer;
}

.dc-cta-description {
  padding-left: 16px;
  padding-right: 10px;
}

button.premium-cta-close {
  display: none;
  width: 28px;
  height: auto;
  border-radius: 0 4px 4px 0;
  border-width: 0;
  background-color: var(--popup-help-button-bg-color);
  color: var(--popup-button-reenable-text-color);
  font-size: 15px;
}

button.premium-dc-cta-close {
  width: 40px;
}

button.premium-cta-close:hover {
  box-shadow: none;
}

.premium-cta:hover .premium-cta-close,
#vpn_cta_close {
  display: flex;
  justify-content: center;
  align-items: center;
}

.newText_v2 {
  color: white;
  background-color: #03bcfc;
  font-weight: bold;
  font-size: 13px;
  border-radius: 3px;
  padding: 1px 5px;
  line-height: normal;
}

#mab_new_cta_close,
#div_free_dc_cta_close {
  background-color: #03bcfc;
}

.div_vpn_cta_bold {
  font-weight: bold;
}

#mab_new_cta_close > i,
#div_free_dc_cta_close > i {
  color: white;
}

#vpn_cta_close {
  background-color: var(--popup-card-background-color);
}

#vpn_cta_close_icon {
  color: var(--popup-vpn-cta-close-icon-color);
  background-color: var(--popup-card-background-color);
}

.vpn-top-row {
  line-height: 140%;
}

.vpn-button-row {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vpn-cta-button {
  border-radius: 3px;
  border-width: 0;
  background-color: #0055b7;
  color: #ffffff;
  width: 115px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
}

#div_myadblock_enrollment_v2:hover,
#div_free_dc_cta:hover {
  color: white;
  background-color: #2284f7;
}

#div_vpn_cta:hover {
  background-color: var(--popup-vpn-cta-hover-bg-color);
  color: var(--popup-vpn-cta-hover-color);
}

#div_vpn_cta:hover button,
#div_vpn_cta:hover #vpn_cta_close_icon {
  background-color: var(--popup-vpn-cta-hover-close-bg-color);
  color: var(--popup-vpn-cta-hover-close-color);
}

#div_premium_themes_cta {
  color: var(--popup-themes-cta-text);
  background: var(--popup-themes-cta-background);
}

#div_premium_themes_cta .cta-description {
  padding: 8px 10px;
}

#div_premium_themes_cta:not(:hover) .cta-description > i {
  color: var(--popup-themes-cta-icon);
}

#div_premium_themes_cta:hover {
  color: var(--popup-themes-cta-color-on-hover);
  background-color: var(--popup-themes-cta-background-on-hover);
}

#close-themes-cta {
  background-color: rgba(255, 255, 255, 0.25);
}

#close-themes-cta > i {
  color: var(--popup-themes-cta-color-on-hover);
}

.separator.hide-on-new-cta-hover {
  background-color: var(--popup-background-color);
}

.premium-dc-cta {
  font-size: 13px;
  background-color: var(--popup-dc-cta-background-color);
  color: var(--popup-dc-cta-color);
}

.premium-dc-cta-close i {
  color: var(--popup-dc-cta-color);
}

.premium-dc-cta:hover .dc-cta-message {
  font-weight: bold;
}

.premium-dc-cta:hover .premium-dc-cta-close {
  background-color: var(--popup-dc-cta-close-background-color-on-hover);
}

/* BUTTONS */

#btn_unpause_once,
#btn_unpause_all,
#btn_enable_adblock_on_this_page {
  width: 288px;
}

#btn_unpause_once:hover,
#btn_unpause_all:hover,
#btn_enable_adblock_on_this_page:hover {
  color: var(--popup-button-reenable-hovered-text-color);
  background-color: var(--popup-button-reenable-hovered-bg-color);
}

.popup-btn.withBorder {
  border: 0.5px solid;
  border-color: var(--popup-button-outline-color);
}

.popup-btn {
  height: 36px;
  width: 122px;
  border-radius: 4px;
  margin: 0px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  padding: 0px;
  font-weight: normal;
}

.popup-btn:hover {
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
}

.popup-btn.grey {
  color: var(--popup-button-text);
  background-color: var(--popup-button-background-color);
}

.popup-btn.white {
  color: var(--popup-button-reenable-text-color);
  background-color: var(--popup-button-reenable-bg-color);
}

/* pause */

#pause_subsection {
  display: none;
  margin: 0.75rem 0;
}

#btn_row {
  margin-top: 12px;
  margin-bottom: 24px;
}

#hostname,
#disabled_site_title {
  font-size: 18px;
  font-weight: 700;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
  margin: 0;
  display: none;
  overflow-wrap: anywhere;
}

#div_domain_paused_msg,
#div_all_paused_msg,
#div_domain_allowlisted_msg {
  display: none;
  padding-top: 16px;
  padding-bottom: 48px;
}

#domain_paused_subsection,
#all_paused_subsection {
  display: none;
  width: 288px;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 16px;
  justify-content: center;
  align-items: center;
}

#disabled_site_section {
  display: none;
}

/* other, misc */

#disabled_site_img {
  width: 100%;
  height: 233px;
}

#primary_section.fade-in {
  animation: fade-in 0.45s;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}