// Specific styles for the settings pages (profile, user account, privacy, services)

// These names are generated by a rails controller
// scss-lint:disable SelectorFormat
.page-profiles.action-edit,
.page-services.action-index,
.page-user_applications,
.page-users.action-edit,
.page-users.action-update,
.page-users.action-privacy_settings {
  .framed-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

// scss-lint:enable SelectorFormat

.enclosed-checkbox label {
  margin-bottom: 0;
}

.profile-photo-upload {
  text-align: center;

  .avatar {
    height: auto;
    margin-bottom: 20px;
    max-width: 200px;
    width: auto;
  }

  .crop-container {
    .controls {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
  }

  .preview {
    border-radius: 4px;
    height: 50px;
    overflow: hidden;
    width: 50px;
  }

  .spinner {
    height: 50px;
    width: 50px;
  }
}

.settings-visibility {
  margin-left: 10px;
}

.page-profiles.action-edit textarea {
  max-width: 100%;
  min-width: 100%;
}

.account-data h6 {
  color: $text-grey;
}
