/* 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";

:host {
  --skeleton-container-bg-color: var(--background-color-box-info);
  --skeleton-placeholder-bg-color: var(--card-border-color);

  @media -moz-pref("browser.nova.enabled") {
    --skeleton-container-bg-color: light-dark(var(--color-gray-0), var(--color-black-alpha-50));
    --skeleton-placeholder-bg-color: light-dark(var(--color-black-alpha-10), var(--color-white-alpha-20));
  }
}

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;

  @media -moz-pref("browser.nova.enabled") {
    margin-inline: var(--space-small);
  }
}

.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-content-alignment: start;
    --button-font-weight: var(--font-weight);
    --button-padding: var(--space-small);
    --focus-outline-offset: calc(-1 * var(--focus-outline-width));
    width: 100%;

    @media not -moz-pref("browser.nova.enabled") {
      --button-border-radius: var(--border-radius-small);
    }
  }
}

.vpn-title {
  font-size: var(--font-size-heading-medium);
  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 {
  font-size: var(--font-size-large);

  ul {
    padding-inline-start: var(--space-large);
  }

  li {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding-block-start: var(--space-medium);

    > span {
      flex: 1;
    }

    &:last-of-type {
      padding-block-end: var(--space-xlarge);
    }

    &.with-icon::before {
      content: "";
      display: inline-block;
      width: var(--icon-size-small);
      height: var(--icon-size-small);
      flex-shrink: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      -moz-context-properties: fill;
      fill: currentColor;
    }
  }
}

.vpn-button {
  display: block;
  padding-top: var(--space-medium);
}

#unauthenticated-vpn-title {
  font-size: var(--font-size-heading-xlarge);
}

#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);
  @media not -moz-pref("browser.nova.enabled") {
    color: var(--text-color);
  }
}

#unauthenticated-vpn-img {
  width: max-content;
  align-self: center;
  margin-block-start: var(--space-large);
  margin-block-end: var(--space-large);
}

#unauthenticated-vpn-message {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

#upgrade-vpn-description {
  color: var(--text-color-deemphasized);
}

#unauthenticated-private-location::before {
  background-image: url("chrome://browser/skin/notification-icons/geo.svg");
}

#unauthenticated-choose-location::before {
  background-image: url("chrome://global/skin/icons/defaultFavicon.svg");
}

#unauthenticated-get-started {
  --button-padding: var(--space-medium);
  margin: 0 auto;
  width: var(--size-layout-small);

  @media not -moz-pref("browser.nova.enabled") {
    width: 100%;
  }
}

#unauthenticated-footer {
  margin-block-start: var(--space-medium);
  margin-block-end: var(--space-medium);
  color: var(--text-color-deemphasized);
  text-align: center;
}

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

#enrolling-container {
  background-color: var(--skeleton-container-bg-color);
  border: var(--border-width) solid var(--border-color-deemphasized);
  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;
  }
}

.skeleton {
  background-color: var(--skeleton-placeholder-bg-color);
}

.skeleton-title {
  height: 1lh;
  width: var(--size-layout-xsmall);
  border-radius: var(--space-xxsmall);
  margin-block: var(--space-medium) var(--space-small);

  @media -moz-pref("browser.nova.enabled") {
    margin-block: var(--space-xsmall) 0;
  }
}

.skeleton-line {
  height: var(--size-item-xsmall);
  width: var(--size-layout-small);
  border-radius: var(--space-xxsmall);
}

.skeleton-line-thick {
  height: var(--button-min-height);
  width: 100%;
  border-radius: var(--border-radius-small);

  &:first-of-type {
    margin-block-start: var(--space-xxlarge);
  }

  @media -moz-pref("browser.nova.enabled") {
    padding-block: var(--space-xsmall);
    border-radius: var(--border-radius-circle);
  }
}

.skeleton-image {
  width: var(--size-item-large);
  height: var(--size-item-large);
  border-radius: var(--border-radius-circle);
  margin: var(--space-xsmall);
}

#site-exclusion-control {
  display: flex;

  margin-block-start: var(--space-medium);
  padding: var(--space-medium);
}

#site-exclusion-toggle {
  flex: 1;

  > [slot="description"] {
    /* Add space equivalent to the size of the icon in the row above
     * var(--icon-size-small) is the width of the icon
     * var(--space-small) is the gap between the icon and the label
     */
    padding-inline-start: var(--icon-size-small);
    margin-inline-start: var(--space-small);
    display: inline-block;
  }
}