@layer page {
  #settings-title {
    view-transition-name: settings-title;
  }

  #change-language-title {
    view-transition-name: change-language-title;
  }

  #data-title {
    view-transition-name: data-title;
  }

  #backup-restore-title {
    view-transition-name: backup-restore-title;
  }

  .backup-restore-description {
    view-transition-name: backup-restore-description;
  }

  .language-list-item-link {
    color: var(--base-secondary);
  }

  .backup-restore-container {
    .dump-data-error-message {
      display: none;
    }

    &:has(.error) {
      .dump-data-error-message {
        display: revert;
      }
    }
  }

  .dump-data-button {
    display: block flex;
    margin-inline-end: auto;
    view-transition-name: dump-data-button;

    :is(.loader-icon, .check-icon) {
      display: none;
    }

    &.processing {
      .loader-icon {
        display: revert;
      }
    }

    &.finished {
      .check-icon {
        display: revert;
      }
    }
  }

  .restore-data-button {
    margin-block-start: 10px;
    margin-inline-end: auto;
    view-transition-name: restore-data-button;

    #restore-data-input:focus-visible + & {
      outline: 2px solid var(--base-secondary);
    }
  }

  #confirm-restore-dialog {
    inline-size: calc(100% - 10px);

    .form-invalid-message {
      display: none;
    }

    &:has(.error) {
      .form-invalid-message {
        display: revert;
      }
    }
  }

  .confirm-restore-dialog-text {
    display: block flow;
    margin-block: 1rem;
  }

  .confirm-restore-button {
    margin-inline-end: 10px;

    :is(.loader-icon, .check-icon, .x-mark-icon) {
      display: none;
    }

    &.processing {
      .loader-icon {
        display: revert;
      }
    }

    &.finished {
      .check-icon {
        display: revert;
      }
    }

    &.error {
      :is(.x-mark-icon) {
        display: revert;
      }
    }
  }
}