/* 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 url("chrome://global/skin/in-content/common.css");
@import url("chrome://browser/content/backup/backup-common.css");

:host {
  --margin-inline-start-checkbox-content: calc(var(--checkbox-margin-inline) + var(--checkbox-size));
  --font-size-heading: 17px;
  --font-size-sub-heading: 15px;
  --font-weight-label: normal;
  --font-size-label: 14px;
  --padding-block-wrapper: 20px;
  --margin-block-start-file-picker: 18px;
  --gap-button-group: 12px;
}

#backup-turn-on-scheduled-wrapper {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "button-group";
  grid-template-rows: auto auto auto;

  #backup-turn-on-scheduled-header {
    grid-area: header;
    margin: 0;
  }

  & fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  #backup-turn-on-scheduled-content {
    display: flex;
    flex-direction: column;
    grid-area: content;
    margin-block-start: var(--space-small);
    margin-block-end: var(--space-large);
    row-gap: var(--space-large);
  }

  #all-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xlarge);
  }

  #backup-location-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xsmall);

    #backup-location-filepicker {
      display: flex;
      column-gap: var(--space-small);
      align-items: center;
    }
  }

  #sensitive-data-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-large);

    #sensitive-data-checkbox-label {
      display: flex;
      gap: var(--checkbox-margin-inline);
      align-items: center;
    }

    #sensitive-data-checkbox-label > input {
      margin: 0;
    }

    #sensitive-data-checkbox {
      display: flex;
      flex-direction: column;
      row-gap: var(--space-xsmall);
    }

    #sensitive-data-checkbox > span {
      margin-inline-start: var(--margin-inline-start-checkbox-content);
    }
  }

  #passwords {
    margin-inline: var(--margin-inline-start-checkbox-content);
  }

  #backup-turn-on-scheduled-button-group {
    grid-area: button-group;
  }
}

:host([hide-password-input]) #backup-turn-on-scheduled-wrapper #sensitive-data-controls {
  display: none;
}

:host([hide-file-path-chooser]) #backup-turn-on-scheduled-wrapper #backup-location-controls {
  display: none;
}

:host([hide-file-path-chooser]) #backup-turn-on-scheduled-wrapper #sensitive-data-controls #sensitive-data-checkbox {
  display: none;
}

:host([hide-file-path-chooser]) #backup-turn-on-scheduled-wrapper #backup-turn-on-scheduled-header {
  display: none;
}

:host([hide-buttons]) #backup-turn-on-scheduled-wrapper #backup-turn-on-scheduled-button-group {
  display: none;
}

:host([hide-secondary-button]) #backup-turn-on-scheduled-wrapper #backup-turn-on-scheduled-cancel-button {
  display: none;
}

:host([hide-headers]) #backup-turn-on-scheduled-description {
  display: none;
}

:host([embedded-fx-backup-opt-in]) {
  #backup-turn-on-scheduled-wrapper {
    width: 500px;
    margin-inline: auto;
    padding-block: var(--padding-block-wrapper);
    overflow: hidden;

    #backup-location-controls #backup-location-filepicker {
      margin-block-start: var(--margin-block-start-file-picker);
    }

    #backup-turn-on-scheduled-header {
      font-weight: var(--font-weight-heading);
      font-size: var(--font-size-heading);
      text-align: start;
    }

    #backup-location-label {
      font-size: var(--font-size-label);
      text-align: start;
      font-weight: var(--font-weight-label);
    }
  }
}

:host([embedded-fx-backup-opt-in]:not([hide-buttons])) {
  #backup-turn-on-scheduled-wrapper {
    #backup-turn-on-scheduled-button-group {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: var(--gap-button-group);

      #backup-turn-on-scheduled-confirm-button {
        margin: 0;
      }
    }
  }
}