#welcome-dialog {
  -fx-background-color: -df-background;

  HBox, VBox {
    -fx-spacing: 0; // Fight crazy non-zero default.
  }

  .scroll-bar {
    -fx-background-color: transparent;

    .track {
      -fx-background-color: rgba(0, 0, 0, 0.2);
      -fx-background-radius: 4px;
      -fx-background-insets: 0;
    }

    .thumb {
      -fx-background-radius: 4px;
      -fx-background-color: white;
      -fx-opacity: 0.15;

      &:hover, &:pressed {
        -fx-opacity: 0.25;
      }
    }

    &:horizontal {
      -fx-pref-height: 8px;
      -fx-background-insets: 0;
      -fx-padding: 0px 24px;

      >.thumb {
        -fx-background-insets: 0;
        -fx-padding: 0 !important;
      }
    }

    &:vertical {
      -fx-pref-width: 8px;
      -fx-background-insets: 0;
      -fx-padding: 24px 0px;

      >.thumb {
        -fx-background-insets: 0;
        -fx-padding: 0 !important;
      }
    }
  }

  #left-pane {
    -fx-background-color: -df-background-darker;

    .defold-logo {
      -fx-padding: 16px;
    }

    .really-small-progress-bar {
      // 115 (defold logo width) + 16 * 2 (defold logo padding) - 19 * 2 (stack pane margins)
      -fx-min-width: 109px;
    }
  }

  .pane-button {
    -fx-alignment: center-right;
    -fx-graphic-text-gap: 0;
    -fx-label-padding: 0;
    -fx-max-width: Infinity;
    -fx-padding: 9px 16px;
    -fx-border-color: transparent;
    -fx-border-width: 0px 3px 0px 0px;
    -fx-text-fill: -df-text;
    -fx-opacity: 50%;

    &:hover {
      -fx-opacity: 75%;
    }

    &:selected {
      -fx-border-color: -df-defold-orange;
      -fx-opacity: 100%;
    }

    .radio {
      -fx-padding: 0;
      visibility: collapse;

      .dot {
        -fx-padding: 0;
        visibility: collapse;
      }
    }

    .label {
      -fx-text-alignment: right;
    }
  }

  .tab-header-pane {
    -fx-border-color: rgba(255, 255, 255, 0.07);
    -fx-border-width: 0px 0px 1px 0px;
    -fx-padding: 0px 24px 0px 24px;
    -fx-min-height: 53px;
    -fx-alignment: bottom-left;
    -fx-spacing: 24px;

    RadioButton {
      -fx-graphic-text-gap: 0;
      -fx-label-padding: 0;
      -fx-padding: 4px 4px;
      -fx-border-color: transparent;
      -fx-border-width: 0px 0px 2px 0px;
      -fx-text-fill: -df-text;
      -fx-opacity: 50%;

      &:hover {
        -fx-opacity: 75%;
      }

      &:selected {
        -fx-border-color: -df-defold-orange;
        -fx-opacity: 100%;
      }

      .radio {
        -fx-padding: 0;
        visibility: collapse;

        .dot {
          -fx-padding: 0;
          visibility: collapse;
        }
      }
    }
  }

  .header-pane {
    -fx-padding: 0px 16px 8px 16px;
    -fx-border-width: 0px 0px 1px 0px;
    -fx-border-color: rgba(255, 255, 255, 0.07);
    -fx-min-height: 53px;
    -fx-alignment: bottom-left;

    Label {
      -fx-translate-y: 4px;
    }
  }

  .form-pane {
    -fx-background-color: -df-background-light;
    -fx-padding: 24px;
    -fx-spacing: 16px;

    .field-label {
      -fx-min-height: 30px;
      -fx-padding: 0px 8px 0px 0px;
    }

    .text-field {
      -fx-min-height: 30px;
    }

    .button {
      -fx-min-height: 30px;
    }

    .submit-button {
      -fx-min-width: 140px;
    }
  }

  .defold-logo-container.gray {
    .left {
      -fx-fill: -df-component-light;
    }

    .right {
      -fx-fill: -df-background-lighter;
    }

    .bottom {
      -fx-fill: -df-background-light;
    }
  }

  @mixin welcome-list-view {
      -fx-background-color: transparent;
          -fx-padding: 0;

          .list-cell {
            -fx-pref-width: 0; // Stretched by ListView. Without this, we get horizontal scrolling.
            -fx-background-color: transparent;
            -fx-border-width: 0;
            -fx-padding: 0;
          }
  }

  .project-list-view {
    @include welcome-list-view();
    -fx-padding: 0px 16px 0px 0px;

    .list-cell {
      -fx-border-width: 0px 3px 0px 0px;
      -fx-border-color: transparent;

      &:selected {
        -fx-background-color: rgba(255, 255, 255, 0.05);
        -fx-border-color: -df-defold-blue-lighter;
      }
    }
  }

  .template-list-view {
    @include welcome-list-view();
    -fx-padding: 0px 16px 0px 0px;

    .list-cell {
      -fx-padding: 24px 24px 0px 24px;

      &.last-list-item {
        -fx-padding: 24px;
      }
    }
  }

  .project-entry {
    -fx-padding: 0px 24px 0px 24px;
    -fx-alignment: center-right;

    .title-and-description {
      -fx-alignment: center-left;

      .title {
        Text {
          -fx-fill: -df-text;
          -fx-opacity: 87%;
          -fx-font-size: 125%;
          -fx-font-smoothing-type: lcd;

          &.matched {
            -fx-fill: -df-defold-blue-lighter;
            -fx-opacity: 100%;
          }
        }
      }

      .description {
        -fx-font-smoothing-type: lcd;
        -fx-text-fill: -df-text;
        -fx-opacity: 0.4;
      }
    }

    .timestamp {
      -fx-min-width: 120px;
      -fx-text-alignment: right;
      -fx-alignment: center-right;
      -fx-font-smoothing-type: lcd;
      -fx-text-fill: -df-text;
      -fx-opacity: 0.4;
    }
  }

  .template-entry {
    -fx-background-color: -df-component-dark;
    -fx-background-radius: 2px;
    -fx-border-width: 1px;
    -fx-border-color: transparent;
    -fx-padding: 8px;

    .svg-icon {
      -fx-background-color: -df-component-dark;
      -fx-background-radius: 2px;
      -fx-max-width: 171px;
      -fx-max-height: 114px;
      -fx-min-width: 171px;
      -fx-min-height: 114px;

      SVGPath {
        -fx-fill: -df-text-dark;
      }
    }

    .description {
      -fx-padding: 6px 16px;

      Text {
        -fx-fill: -df-text;
        -fx-font-smoothing-type: lcd;
      }

      TextFlow {
        -fx-padding: 5px 0px 0px 0px;
        -fx-line-spacing: 2px;
      }
    }
  }

  .list-cell:selected .template-entry {
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
    -fx-border-color: -df-defold-blue-lighter;
    -fx-effect: dropshadow(gaussian, -df-defold-blue-lighter, 10, 0, 0, 0);

    .svg-icon {
      SVGPath {
        -fx-fill: -df-defold-blue-lighter;
      }
    }
  }

  #progress-overlay {
    .background-cover {
      -fx-background-color: -df-background-lighter;
      -fx-opacity: 85%;
    }

    #progress-header {
      -fx-text-fill: -df-text;
      -fx-padding: 0px 24px 0px 24px;
    }

    #progress-bar {
      -fx-background-radius: 0;
      -fx-padding: 17px 0px 24px 0px;

      .bar {
        -fx-background-color: -df-defold-blue-lighter;
        -fx-background-insets: 0;
        -fx-background-radius: 4px;
        -fx-min-height: 5px;
        -fx-padding: 0;
      }

      .track {
        -fx-background-color: -df-background-lighter;
        -fx-background-insets: 0;
        -fx-border-width: 0;
        -fx-background-radius: 4px;
      }
    }
  }

  .filter-field {
    -fx-pref-width: 106px;
    -fx-padding: 4px 24px 4px 2px;
    -fx-prompt-text-fill: rgba(221, 221, 221, 0.4);
    -fx-background-color: transparent;
    -fx-border-color: transparent;

    &:hover {
      -fx-border-color: transparent transparent -df-background-lighter transparent;
    }

    &:focused {
      -fx-padding: 4px 24px 4px 2px;
      -fx-border-width: 1px;
      -fx-border-color: transparent transparent -df-defold-orange transparent;
    }
  }

  .filter-field-icon {
    -fx-fill: rgba(221, 221, 221, 0.4);
  }

  .location-field {
    Button {
      -fx-border-width: 0px;
      -fx-background-radius: 0px 2px 2px 0px;
      -fx-background-color: -df-component-dark;
      -fx-min-width: 30px;
      -fx-padding: 0px;
      -fx-font-size: 90%;

      &:hover {
        -fx-background-color: -df-component-lighter;
      }
    }

    .path-field {
      -fx-alignment: center-left;
      -fx-background-color: transparent;
      -fx-border-color: -df-component-dark;
      -fx-border-width: 1px 0px 1px 1px;
      -fx-padding: 4px 8px;
    }

    .path-element {
      -fx-padding: 0;
      -fx-text-fill: -df-text;
      -fx-font-smoothing-type: lcd;

      &.implicit {
        -fx-opacity: 0.4;
      }
    }
  }

  .df-header {
    -fx-max-width: Infinity;
  }

  .remove-button {
    -fx-min-width: 22px;
    -fx-max-width: 22px;
    -fx-max-height: 22px;
    -fx-min-height: 22px;
    -fx-border-width: 0;
    -fx-background-radius: 11px;
    visibility: hidden;
    -fx-opacity: 0.75;
  }
  & .project-entry:hover .remove-button {
    visibility: visible;
  }
}
#language-selector {
    // 115 (defold logo width) + 16 * 2 (defold logo padding) - 24 * 2 (vbox margins)
    -fx-max-width: 99px;
}