packages/fxa-content-server/app/styles/modules/_settings.scss

body.settings .loading {
  position: relative;
  top: 150px;
}

body.settings #main-content {
  background: none;
  border: 0;
  box-shadow: none;
}

body.settings #main-content.panel,
body.settings #main-content.card {
  visibility: hidden;
}

body.settings #stage .settings {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

#fxa-settings {
  flex: 1;

  @include respond-to('big') {
    padding: 0 32px;
  }

  @include respond-to('small') {
    padding: 0;
  }
}

#submit-btn.qr-code-button::before {
  content: image-url('icon-qr-code.svg');
  padding: 3px 10px 0 0;
}

// settings header controls
#fxa-settings-header-wrapper {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom:32px;

  @include respond-to('small') {
    padding-inline-start: 16px;
    padding-bottom:16px;
  }

  #fxa-settings-header {
    @include respond-to('small') {
      flex: 1 1;
      padding:16px 0;
    }
  }

  .settings-button {
    @include respond-to('big') {
      width: 128px;
    }

    @include respond-to('small') {
      width: 96px;
    }
  }

  .settings-success-wrapper {
    left: 0;
    margin: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .settings-success {
    margin: 0 auto;
    top: 0;

    @include respond-to('small') {
      width: 100%;
    }
  }
}

// settings buttons
.settings-button {
  border-radius: $button-border-radius-settings;
  font-size: $button-font-size-settings;
  font-weight: $button-font-weight-settings;
  white-space: nowrap;

  @include respond-to('big') {
    height: $button-height-settings;
  }

  @include respond-to('small') {
    height: $button-height-settings-small;
  }

  .button-row & {
    @extend .settings-button;
    margin: 0;
    padding: 0;

    @include respond-to('big') {
      height: 48px;
      width: 48%;
    }

    @include respond-to('small') {
      height: 40px;
      width: 48%;
    }

    &:last-child {
      html[dir='ltr'] & {
        float: right;

        &.unpaired {
          float: none;
        }
      }

      html[dir='rtl'] & {
        float: left;

        &.unpaired {
          float: none;
        }
      }

      &:not(.clients-done) {
        html[dir] .clients & {
          @include respond-to('small') {
            float: none;
            margin: 10px 0;
          }
        }
      }
    }
  }

  .button-flex-row & {
    margin-left: 8px;
    margin-right: 8px;

    @include respond-to('big') {
      height: 48px;
    }

    @include respond-to('small') {
      height: 40px;
    }

    &.email-refresh .spinner {
      margin: 0 auto;
    }
  }

  &.settings-unit-toggle,
  &.settings-unit-loading {
    flex: 1 1 128px;
  }

  &.unpaired {
    width: 100%;
  }
}

// area above white box with avatar content
#fxa-settings-profile-header-wrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  max-width: 100vw;

  @include respond-to('big') {
    padding: 0 32px 15px;
  }

  @include respond-to('small') {
    padding: 0 16px 15px;
  }
}

#fxa-settings-profile-header {
  margin: 0 16px;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;

  .card-header,
  .card-subheader {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-header {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0;
    padding-bottom: 1px;

    @include respond-to('small') {
      font-size: 14px;
    }
  }

  .card-subheader {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
  }
}

.settings-child-view:last-child:not(.modal) {
  padding-bottom: 1px;
}

.settings-unit {
  border-top: 1px solid $settings-section-border;
}

.settings-unit-stub {
  align-items: center;
  display: flex;
  min-height: 72px;

  @include respond-to('big') {
    padding: 16px 32px;
  }
  @include respond-to('small') {
    padding: 18px 16px;
  }

  .settings-unit-summary {
    margin: 0;
    width: 100%;

    @include respond-to('big') {
      html[dir='ltr'] & {
        margin-right: 10px;
      }

      html[dir='rtl'] & {
        margin-left: 10px;
      }
    }

    @include respond-to('small') {
      html[dir='ltr'] & {
        margin-right: 1%;
      }

      html[dir='rtl'] & {
        margin-left: 1%;
      }
    }
  }

  .settings-unit-title {
    color: $text-color;
    font-size: $base-font + 2;
    font-weight: 400;
    margin: 0;
  }

  .settings-unit-title:only-child {
    line-height: 26px;
  }
}

.settings-unit-details {
  clear: both;
  display: none;

  @include respond-to('big') {
    padding: 0 32px;
  }
  @include respond-to('small') {
    padding: 0 16px;
  }

  p {
    clear: both;
    color: $faint-text-color;
    line-height: 1.5;
    margin: 6px 0 24px;
  }
}

.open .settings-unit-details {
  display: block;
}

.open .settings-unit-toggle,
.settings-button.settings-unit-loading {
  display: none;
}

.blocker {
  // Firefox 49 has an issue with z-index stacking
  // Update z-index of the jquery modal, see issue #4257
  z-index: 7;
}

section.modal-panel {
  .button-row:not(.save-options) {
    margin-bottom: 0;

    html[dir='ltr'] & {
      text-align: left;

      .input-row {
        text-align: left;
      }
    }

    html[dir='rtl'] & {
      text-align: right;
    }

    .input-row {
      text-align: right;
    }
  }
}

.delete-account {
  p {
    margin-bottom: 12px;
  }

  .subscription-link {
    @include message-box($warning-background-color, $warning-text-color);
    margin: 0 0 24px;
  }

  &-product-container {
    &.hide {
      // 0 products or error during fetch for subscriptions and/or clients
      display: none;
    }
  }

  &-product-list {
    line-height: 24px;
    margin: 0 0 24px;

    html[dir='ltr'] & {
      padding-left: 14px;
    }

    html[dir='rtl'] & {
      padding-right: 14px;
    }
  }

  &-checkbox-list {
    list-style: none;
    margin: 0 0 32px;

    html[dir='ltr'] & {
      padding-left: 0;
    }

    html[dir='rtl'] & {
      padding-right: 0;
    }

    &-item {
      display: grid;
      grid-template-columns: 28px auto;
      margin-bottom: 12px;
    }

    label {
      line-height: 1.5;
    }
  }

  ul {
    color: $faint-text-color;
  }

  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.fxa-radio {
  html[dir='ltr'] & {
    text-align: left;
  }

  html[dir='rtl'] & {
    text-align: right;
  }

  label {
    display: block;
  }
}

.breadcrumbs {
  margin-top: 0;
  padding-inline-start: 32px;
  width: 100%;

  @include respond-to('small') {
    margin-bottom: 0;
    margin-inline-start: 0;
    padding: 0;
  }

  li {
    float: inline-start;
    list-style: none;
    margin: 0;
    padding: 0;

    &::before {
      content: '\003E';
      padding: 0 10px;

      @include respond-to('small') {
        padding: 0 5px;
      }
    }

    &:first-child::before {
      content: '';
      padding: 0;
    }
  }
}