.app-settings {
  padding: $pad-xxlarge 30px;

  &__page-description {
    font-size: $x-small;
    color: $core-fleet-black;
    @include sticky-settings-description;
  }

  h2 {
    font-size: $medium;
    font-weight: $regular;
    color: $core-fleet-black;
    border-bottom: solid 1px $ui-fleet-blue-15;
    margin: 0 0 15px;
    padding: 0 0 $pad-small;
  }

  .fleeticon {
    margin: 0 20px;
    vertical-align: 4px;
  }

  small {
    font-size: $x-small;
    font-weight: $regular;
    color: $core-fleet-black;
  }

  &__settings-form {
    display: flex;
  }

  &__form-nav-list {
    position: -webkit-sticky;
    position: sticky;
    // this is the spacing needed to make the sticky form nav position correctly when scrolling
    // TODO: find a way to calculate these sticky positions this and use variables.
    //  will be tedious to update otherwise.
    top: 217px;
    width: 178px;
    margin: 0;
    padding: 0 110px 0 0;
    list-style: none;
    font-size: $x-small;

    li {
      margin-bottom: $pad-medium;
    }

    a {
      color: $core-fleet-black;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        color: $core-vibrant-blue;
      }
    }
  }

  // so tooltips won't be triggered with whitespace
  .form-field__label {
    display: inline-block;

    .buttons {
      top: 22px;
    }
    .enroll-secrets__secret-input {
      .input-field {
        width: 100%;
      }
    }
  }
}
