.bundle-dialog {
  $vertical-margin-width: 12px;
  $horizontal-margin-width: $vertical-margin-width * 2;

  -fx-background-color: -df-background-light;

  >.headers {
    -fx-padding: $vertical-margin-width $horizontal-margin-width $vertical-margin-width $horizontal-margin-width;
    -fx-background-color: -df-background;
    -fx-pref-height: 50px;

    .header-label {
      -fx-text-fill: -df-text;
    }

    #header-info-label {
      -fx-text-fill: -df-text-dark;

      &.error { -fx-text-fill: -df-error-severity-fatal; }
      &.warning { -fx-text-fill: -df-error-severity-warning; }
    }
  }

  >.settings {
    -fx-padding: $vertical-margin-width $horizontal-margin-width 0px $horizontal-margin-width;
    -fx-spacing: 6px;

    .field-label {
      -fx-alignment: center-right;
      -fx-padding: 5px 10px 5px 0px;
    }

    .choice-box, .text-field {
      -fx-pref-width: 165px;

      &.error { -fx-border-color: -df-error-severity-fatal; }
      &.warning { -fx-border-color: -df-error-severity-warning; }
      &.info { -fx-border-color: -df-error-severity-info; }
    }
  }

  >.settings.generic {
    -fx-padding: 6px $horizontal-margin-width 0px $horizontal-margin-width;
  }

  >.buttons {
    -fx-padding: $vertical-margin-width $horizontal-margin-width $vertical-margin-width $horizontal-margin-width;
    -fx-alignment: center-right;
  }

  @mixin field-layout($label-column-width) {
    .field-label {
      -fx-pref-width: $label-column-width;
    }

    >.settings.toggles {
      -fx-padding: $vertical-margin-width $horizontal-margin-width 0px ($label-column-width + $horizontal-margin-width);
    }

    .labeled-check-box {
        -fx-padding: 3px 0px 3px 0px;
    }
  }

  @mixin generic-only-field-layout() {
    @include field-layout(130px);

    >.settings.generic {
      -fx-padding: $vertical-margin-width $horizontal-margin-width 0px $horizontal-margin-width;
    }
  }

  &.android {
    -fx-min-width: 600px;
    @include field-layout(130px);
  }

  &.html5 {
    -fx-min-width: 375px;
    @include generic-only-field-layout();
  }

  &.ios {
    -fx-min-width: 600px;
    @include field-layout(130px);
  }

  &.linux {
    -fx-min-width: 375px;
    @include generic-only-field-layout();
  }

  &.macos {
    -fx-min-width: 375px;
    @include generic-only-field-layout();
  }

  &.windows {
    -fx-min-width: 375px;
    @include field-layout(130px);
  }
}
