// Shared styling for new-look components.
.df-style {

  // ---------------------------------------------------------------------------
  // Default JavaFX node styles
  // ---------------------------------------------------------------------------

  .label {
    -fx-font-size: 110%;
    -fx-font-smoothing-type: lcd;
    -fx-padding: 0;
    -fx-text-fill: -df-text;
  }

  // ---------------------------------------------------------------------------
  // Style classes
  // ---------------------------------------------------------------------------

  .df-button {
    -fx-min-width: 0;
    -fx-background-color: transparent;
    -fx-border-color: -df-defold-blue-lighter;
    -fx-border-radius: 2px;
    -fx-text-fill: -df-defold-blue-lighter;
    -fx-font-size: 110%;
    -fx-padding: 4px 12px;

    &:hover {
      -fx-border-color: -df-defold-blue-lighter;
      -fx-text-fill: -df-defold-blue-lighter;
    }
  }

  .df-button.dim {
    -fx-border-color: -df-text;
    -fx-text-fill: -df-text;

    &:hover {
      -fx-border-color: -df-text-selected;
      -fx-text-fill: -df-text-selected;
    }
  }

  .df-button.extra-dim {
    -fx-border-color: -df-text;
    -fx-text-fill: -df-text;
    -fx-opacity: 0.75;

    &:hover {
      -fx-border-color: -df-text-selected;
      -fx-text-fill: -df-text-selected;
      -fx-opacity: 0.8;
    }
  }

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

  .df-tiny-text {
    -fx-font-size: 80%;

    &.df-below-field {
      -fx-padding: 2px 0px 0px 0px;
    }
  }

  .df-error-banner {
    -fx-alignment: center;
    -fx-border-color: -df-error-severity-warning;
    -fx-border-insets: 17px 17px 0px 17px;
    -fx-border-radius: 4px;
    -fx-border-width: 1px;
    -fx-font-size: 110%;
    -fx-line-spacing: 3px;
    -fx-padding: 10px;
    -fx-text-alignment: center;
    -fx-text-fill: -df-error-severity-warning;
    -fx-wrap-text: true;
    -fx-max-width: Infinity;
  }

  // ---------------------------------------------------------------------------
  // Specific constructs
  // ---------------------------------------------------------------------------

  .explanation-overlay {
    -fx-alignment: top-center;

    .hero-text {
      -fx-font-size: 125%;
      -fx-line-spacing: 3px;
      -fx-padding: 10px 0px 0px 0px;
      -fx-text-alignment: center;
      -fx-wrap-text: true;
    }
  }
}
