// definitions
$spacing-smaller: 16px;
$spacing-default: 24px;
$spacing-larger: 32px;
$spacing-largest: 40px;

@use "sass:string";
@mixin font-size-default { -fx-font-size: 110%; }
@mixin font-size-header { -fx-font-size: 22px; }
@mixin font-default { -fx-font-family: $default-font; }
@mixin font-light { -fx-font-family: $default-font-light; }
@mixin text-fill-text-color { -fx-text-fill: -df-text; }
@mixin spacing-smaller { -fx-spacing: $spacing-smaller;}
@mixin spacing-default { -fx-spacing: $spacing-default;}

// util

.spacing-smaller {
  @include spacing-smaller();
}
.spacing-default {
  @include spacing-default();
}

// label

.label {
  @include font-size-default();
  @include font-default();
  @include text-fill-text-color();
}

.header {
  @include font-size-header();
  @include font-light();
  @include text-fill-text-color();
}

// button

.button {
  @include font-size-default();
  @include font-default();
  -fx-border-radius: 2px;
  -fx-background-radius: 2px;
  -fx-background-color: transparent;
  -fx-padding: 6px 12px;
  &:hover {
    -fx-background-color: rgba(255, 255, 255, 0.04);
  }
  &:focused {
    -fx-background-color: rgba(255, 255, 255, 0.04);
    &:hover {
      -fx-background-color: rgba(255, 255, 255, 0.08);
    }
  }
  &:armed {
    -fx-background-color: transparent;
    &:hover {
      -fx-background-color: transparent;
    }
  }
  &:disabled {
    -fx-text-fill: -df-text;
    -fx-border-color: -df-text-dark;
    -fx-opacity: 0.4;
  }
}
.button-primary {
  -fx-text-fill: -df-defold-blue-light;
  -fx-border-color: -df-defold-blue-light;
  &:hover, &:focused {
    -fx-text-fill: -df-defold-blue-lighter;
    -fx-border-color: -df-defold-blue-lighter;
  }
}
.button-secondary {
  -fx-text-fill: -df-text;
  -fx-border-color: -df-text-dark;
  &:hover, &:focused {
    -fx-text-fill: -df-text-selected;
    -fx-border-color: -df-text;
  }
}
.button-danger {
  -fx-text-fill: -df-defold-red;
  -fx-border-color: -df-defold-red;
  &:hover, &:focused {
    -fx-text-fill: -df-defold-red-light;
    -fx-border-color: -df-defold-red-light;
  }
}

.button-icon {
  -fx-text-fill: -df-text;
  -fx-background-radius: 2px;
  -fx-border-radius: 2px;
  -fx-background-color: -df-component-dark;
  -fx-padding: 0;
  -fx-min-width: 28px;
  -fx-max-width: 28px;
  -fx-pref-width: 28px;
  -fx-min-height: 28px;
  -fx-max-height: 28px;
  -fx-pref-height: 28px;
  -fx-focus-traversable: false;
  -fx-border-width: 0;
  &:hover {
    -fx-background-color: -df-component-lighter;
  }
  &:armed {
    -fx-background-color: -df-background-light !important;
  }
}

// dialog

.dialog-body {
  -fx-background-color: -df-background;
}
.dialog-body-small {
  -fx-pref-width: 440px;
}
.dialog-body-default {
  -fx-pref-width: 540px;
}
.dialog-body-large {
  -fx-pref-width: 640px;
}

.dialog-content {
  -fx-background-color: rgba(0, 0, 0, 0.14);
  -fx-border-width: 1 0;
  -fx-border-color: -df-background-lighter;
}
.dialog-content-padding {
  -fx-padding: $spacing-larger;
}
.dialog-no-content {
  -fx-pref-height: $spacing-largest;
}

.dialog-with-content-header {
  -fx-padding: $spacing-default;
}
.dialog-without-content-header {
  -fx-padding: $spacing-default $spacing-default 0 $spacing-default;
}

.dialog-with-content-footer {
  -fx-padding: $spacing-default;
}
.dialog-without-content-footer {
  -fx-padding: 0 $spacing-default $spacing-default $spacing-default;
}

// text inputs

@mixin text-input-defaults() {
  @include font-default();
  @include font-size-default();
  -fx-highlight-fill: -df-component-light;
  -fx-text-fill: -df-text-selected;
  -fx-prompt-text-fill: -df-component-light;
  -fx-background-color: -df-background-input;
  -fx-border-width: 1px;

  &:readonly {
    @include text-fill-text-color();
    -fx-background-color: transparent;
    -fx-focus-traversable: false;
  }
}

@mixin text-input-variant($border-color, $highlight-color) {
  -fx-border-color: $border-color;
  &:focused { -fx-border-color: $border-color $border-color $highlight-color $border-color; }
  &:readonly { -fx-border-color: $border-color; }
}

.text-field {
  @include text-input-defaults();
  -fx-padding: 4px 8px;
  &:focused {
    -fx-border-width: 1px 1px 2px 1px;
    -fx-padding: 4px 8px 3px 8px;
  }
  &:readonly {
    -fx-border-width: 1px;
    -fx-padding: 4px 8px;
  }
}

.text-field-default {
  @include text-input-variant(-df-background-lighter, -df-defold-orange);
}

.text-field-error {
  @include text-input-variant(-df-defold-red-dark, -df-defold-red);
}

.text-area {
  @include text-input-defaults();

  &:focused {
    -fx-border-width: 1px 1px 2px 1px;
    -fx-border-insets: 0px 0px 1px 0px;
  }
  .content {
    -fx-padding: 4px 8px;
    -fx-background-color: transparent;
  }

  &:readonly {
    -fx-border-width: 1px;
    -fx-border-insets: 0px;
  }
}
.text-area-default {
  @include text-input-variant(-df-background-lighter, -df-defold-orange);
}
.text-area-error {
  @include text-input-variant(-df-defold-red-dark, -df-defold-red);
}
.text-area-borderless {
  @include text-input-variant(transparent, transparent);
}
.text-area-with-dialog-content-padding {
  .content {
    -fx-padding: $spacing-larger;
  }
}

// scrolling

.scroll-bar {
  -fx-background-color: transparent;
  > .thumb {
    -fx-background-color: -df-component-darker;
    -fx-background-radius: 5px;
    -fx-background-insets: 1px;
    &:hover {
      -fx-background-color: -df-component-light;
    }
    &:pressed {
      -fx-background-color: -df-component-light;
    }
  }
  &:vertical {
    -fx-pref-width: 10px;
    > .increment-button, > .decrement-button {
      // this actually sets minimum scrollbar thumb height...
      -fx-pref-width: 15px;
    }
  }
  &:horizontal {
    -fx-pref-height: 10px;
  }
  > .increment-button,
  > .increment-button > .increment-arrow,
  > .decrement-button,
  > .decrement-button > .decrement-arrow {
    -fx-shape: string.unquote("null");
    -fx-padding: 0;
  }
}

.scroll-pane {
  > .viewport {
    -fx-background-color: transparent;
  }
}

.corner {
  -fx-background-color: transparent;
}

// file extensions

@mixin icon-extension-template($color, $active-color){
    & > .content > .image-view {
        -fx-effect: innershadow(gaussian, $color, 20, 0.3, 0, 0);
    }
    &:selected > .content > .image-view, &:hover > .content > .image-view {
        -fx-effect: innershadow(gaussian, $active-color, 20, 0.3, 0, 0);
    }
}

@mixin icon-extensions () {
    &.resource {
        @include icon-extension-template(-df-unknown-file, -df-unknown-file-active)
    }

    &.resource-folder {
        @include icon-extension-template(-df-folder, -df-folder-active)
    }

    &.resource-kind {
        &-script {
            @include icon-extension-template(-df-script-file, -df-script-file-active);
        }
        &-design {
            @include icon-extension-template(-df-design-file, -df-design-file-active);
        }
        &-property {
            @include icon-extension-template(-df-property-file, -df-property-file-active);
        }
    }
}


// components

.input-grid-pane {
  -fx-hgap: $spacing-smaller;
  -fx-vgap: $spacing-smaller;
}

.hyperlink {
  @include font-size-default();
  @include font-default();
  -fx-text-fill: -df-defold-blue-light;
  -fx-border-width: 0;
  -fx-padding: 0;
  &:visited {
    -fx-underline: false;
  }
  &:hover {
    -fx-text-fill: -df-defold-blue-lighter;
    -fx-underline: true;
  }
}

Text {
  @include font-size-default();
  @include font-default();
  -fx-fill: -df-text;
}

.progress-bar {
  -fx-background-radius: 0;
  -fx-min-width: 140px;

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

  .track {
    -fx-background-color: -df-component-light;
  }
}

.context-menu {
  -fx-background-color: -df-component-dark;
  -fx-background-radius: 2px;
  -fx-padding: 5px;
  .menu-item {
    &:focused {
      > .label {
        -fx-text-fill: -df-text-selected;
      }
      -fx-background-color: -df-component-lighter;
      -fx-background-radius: 1px;
    }
    &:disabled {
      > .label {
        @include text-fill-text-color();
      }
      -fx-background-color: transparent;
    }
  }
  .separator {
    -fx-padding: 3 0;
    > .line {
      -fx-background-color: -df-component-light;
      -fx-border-color: transparent;
    }
    &:horizontal > .line {
      -fx-pref-height: 1;
    }
    &:vertical > .line {
      -fx-pref-width: 1;
    }
  }
}

.list-view {
  -fx-background-color: transparent;
  &:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:selected {
    -fx-border-color: -df-defold-orange;
  }
}
.list-cell {
  @include font-size-default();
  @include font-default();
  @include text-fill-text-color();
  -fx-background-color: transparent;
  -fx-border-width: 0 0 0 2;
  -fx-border-color: transparent;

  &:selected {
    -fx-background-color: -df-background-light;
  }

  &:hover {
    -fx-text-fill: -df-text-selected;
    & > .content > TextFlow > Text {
      -fx-fill: -df-text-selected;
      &.matched {
        -fx-fill: -df-defold-blue-lighter;
      }
    }
  }

  @include icon-extensions()
}

Text {
  -fx-font-smoothing-type: lcd;
  -fx-fill: -df-text;
  &.diminished {
    -fx-opacity: 0.5;
  }
  &.matched {
    -fx-fill: -df-defold-blue-lighter;
  }
}
