fleet/frontend/components/forms/admin/AppConfigForm/_styles.scss

.app-config-form {
  &__config-docs {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $pad-medium;
    border-radius: $border-radius;
    border: 1px solid #d9d9fe;
    background-color: $ui-vibrant-blue-10;
    margin-bottom: $pad-medium;
    font-size: $x-small;

    p {
      margin: 0;
      font-size: $x-small;
    }
  }

  &__learn-more {
    color: $core-vibrant-blue;
    font-size: $x-small;
    font-weight: $bold;
    text-decoration: none;

    &--inline {
      margin-left: $pad-medium;
    }
    img {
      width: 12px;
      height: 12px;
      margin-left: $pad-small;
    }
  }

  &__enroll-secret-label {
    font-size: 15px;

    button {
      color: $core-fleet-purple;
      font-size: 15px;
      font-weight: $regular;
      float: right;
      height: 23px;
      text-transform: none;
    }

    input {
      color: $core-fleet-purple;
    }
  }

  .form-field {
    width: 100%;

    &__label {
      font-weight: $bold;
      margin-bottom: $pad-xsmall;
      width: 100%;
    }

    &__hint {
      font-size: $x-small;
      font-style: italic;
    }
  }

  &__section {
    @include clearfix;
    margin: 0 0 $pad-xlarge;

    .upcaret::after {
      content: url("../assets/images/icon-collapse-black-16x16@2x.png");
      transform: scale(0.5);
      border-radius: 0px;
      position: relative;
      top: 8px;
      margin: $pad-xsmall;
    }

    .downcaret::after {
      content: url("../assets/images/icon-chevron-black-16x16@2x.png");
      transform: scale(0.5);
      border-radius: 0px;
      position: relative;
      top: 8px;
      margin: $pad-xsmall;
      margin-right: 18px;
    }

    h2 {
      a {
        color: $core-fleet-black;
        scroll-margin-top: 210px; // used to push down anchor to visible area when there are sticky headers
      }
    }

    .smtp-options {
      font-size: 15px;
      font-weight: $bold;
      color: $core-fleet-black;
      padding-left: 15px;

      em {
        font-style: normal;
      }

      &--configured {
        em {
          color: $ui-success;
        }
      }

      &--notconfigured {
        em {
          color: $ui-error;
        }
      }
    }
  }

  &__section-description {
    font-size: $x-small;
    color: $core-fleet-black;
  }

  &__inputs {
    width: 60%;
    float: left;
    padding-right: $pad-small;
    box-sizing: border-box;

    .input-field {
      width: 100%;
    }

    &--smtp {
      margin: 0 0 $pad-medium;

      .form-field {
        width: 18%;
        float: right;

        &:first-child {
          float: left;
          width: 78%;
        }

        &--checkbox {
          clear: both;
          width: 100%;
          float: none;
        }
      }
    }
    &--usage {
      margin-top: 24px;
    }
    &--webhook {
      margin-bottom: 24px;
    }
  }

  &__details {
    float: right;
    width: 40%;
    height: 87px;

    .icon-tooltip {
      margin: $pad-xlarge 0;
    }

    .hint {
      color: $core-fleet-black;

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

  &__avatar-preview {
    text-align: center;

    img {
      border-radius: 20%;
      height: 120px;
      width: 120px;
      border: 1px solid $ui-fleet-blue-15;
      background-color: $ui-light-grey;
      transform: translate(-100px, 20px);
    }

    p {
      color: $core-fleet-purple;
      font-size: 18px;
      font-weight: $bold;
      margin-top: 0;
    }
  }

  &__smtp-section {
    @include clearfix;
  }

  &__component-label {
    margin: 24px 0 0;
    font-size: $x-small;
  }

  &__yaml {
    width: calc(
      100% - 2px
    ); // because the outline extended beyond the sticky page description
  }

  &__usage-stats-preview-modal,
  &__host-status-webhook-preview-modal {
    .flex-end {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  &__advanced-options {
    margin-bottom: $pad-large;
  }
}