/* 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/. */

@import "chrome://global/skin/global.css";

hr {
  border-style: solid none none none;
  border-color: var(--panel-separator-color);
  margin: var(--panel-separator-margin);
}

#ipprotection-content-wrapper {
  --panel-subview-body-padding-inline: 0;
  display: flex;
  flex-direction: column;
}

.vpn-top-content {
  margin-block-start: var(--space-small);
}

.vpn-bottom-content {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-small);
  moz-button {
    --button-alignment: start;
    --button-border-radius: var(--border-radius-small);
    --button-font-weight: var(--font-weight);
    --button-icon-fill: var(--icon-color);
    --button-padding: var(--space-small) var(--space-medium);
    --focus-outline-offset: calc(-1 * var(--focus-outline-width));
    width: 100%;
  }
}

.vpn-title {
  /* Intentionally using a larger font size for clearer visual hierarchy
 * stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.4em;
  font-weight: var(--font-weight-semibold);
  padding-top: var(--space-large);
  padding-bottom: var(--space-xsmall);
  margin-block: 0;
}

.vpn-subtitle {
  margin: 0;
}

.vpn-description {
  /* Intentionally using a larger font size for clearer visual hierarchy
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.23em;
  color: var(--text-color-deemphasized);
}

.vpn-description ul {
  padding-inline-start: var(--space-xxlarge);
}

.vpn-description li {
  padding-block-start: var(--space-xsmall);
}

.vpn-description li:last-of-type {
  padding-block-end: var(--space-small);
}

.vpn-button {
  /* Intentionally using a larger font size for clearer visual hierarchy
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.2em;
  display: block;
  padding-top: var(--space-medium);
}

#unauthenticated-vpn-content {
  display: flex;
  flex-direction: column;
  padding-block-start: 0;
  padding-block-end: var(--space-small);
  padding-inline-start: var(--space-large);
  padding-inline-end: var(--space-large);
}

#unauthenticated-vpn-message {
  margin: 0;
}

ipprotection-message-bar.vpn-top-content {
  margin-block-start: 0;
  margin-block-end: var(--space-small);
}

@media (prefers-color-scheme: dark) {
  #unauthenticated-vpn-img {
    content: url("chrome://browser/content/ipprotection/assets/vpn-panel-get-started-dark.svg");
  }
}

#enrolling-container {
  background-color: var(--background-color-box-info);
  border-radius: var(--border-radius-medium);
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  padding: var(--space-medium);
}

#enrolling-header {
  display: flex;
  justify-content: space-between;

  > span {
    gap: var(--space-medium);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  img {
    height: var(--icon-size-large);
    width: var(--icon-size-large);
    -moz-context-properties: fill;
    fill: var(--icon-color);
  }
}

.skeleton {
  background-color: var(--card-border-color);
}

.skeleton-title {
  /* Intentionally use a larger font size to match font size of actual status box title */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.4lh;
  height: 1lh;
  width: 102px;
  border-radius: var(--space-xxsmall);
}

.skeleton-line {
  /* Intentionally use a larger font size to match font size of actual status box description */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.23em;
  height: 1lh;
  width: 239px;
  border-radius: var(--space-xxsmall);
}

.skeleton-line-thick {
  height: var(--button-min-height, 32px);
  width: 126px;
  border-radius: var(--border-radius-small);
}

#site-exclusion-control {
  display: flex;

  padding-inline: var(--space-medium);
  padding-block: var(--space-medium);

  &:has(+ .vpn-bottom-content) {
    border-bottom: var(--border-width) solid var(--card-border-color);
  }
}

#site-exclusion-toggle {
  flex: 1;
}