.console-button-base {
  @extend .button-small;
  -fx-border-width: 0;
  -fx-background-radius: 2px;
  -fx-border-color: transparent;
  -fx-min-height: 26px;
  -fx-padding: 0px 10px;

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

  &:armed {
    -fx-background-color: -df-component-light;
  }
}

.console-image-button-base {
  @extend .console-button-base;
  -fx-background-color: -df-component-dark;
  -fx-background-position: center;
  -fx-background-repeat: no-repeat;
  -fx-background-size: 16 16;
  -fx-min-width: 26px;
  -fx-padding: 0px;
}

.console-space-separator {
  -fx-background-color: transparent;
  -fx-padding: 0;
  -fx-min-width: 0px;

  .line {
    -fx-border-width: 0;
    visibility: hidden;
  }
}

#console-tool-bar {
  -fx-background-color: -df-background-light;
  -fx-padding: 16px;

  .separator {
    -fx-orientation: vertical;
  }
}

#console-canvas-pane {
  -fx-background-color: -df-background-light;
  -fx-min-height: 20px;
}

#filter-console {
  @extend .console-button-base;
  -fx-background-radius: 2px;
  -fx-content-display: right;
  -fx-min-width: 60px;
  & > .content {
    -fx-alignment: center-left;
    -fx-background-color: transparent !important;
    & > #filter-console-counter {
      -fx-background-color: -df-component-light;
      -fx-padding: 0px 4px;
      -fx-background-radius: 4px;
    }
    & > #filter-console-arrow {
      -fx-min-width: 10px;
      -fx-max-width: 10px;
      -fx-min-height: 6px;
      -fx-max-height: 6px;
      -fx-effect: none;
      -fx-background-color: -df-component-icon;
      -fx-shape: "M 0 0 h 7 l -3.5 4 z";
      &:open {
        -fx-background-color: -df-text;
        -fx-rotate: 180;
      }
    }
  }
}

.console-filter-popup {
  &-background {
    -fx-background-color: -df-component-darker;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 12, 0, 0, 8);
  }

  .check-box {
    -fx-text-fill: -df-text;
  }
  
  &-list {
    &-cell {
      -fx-padding: 0 4px;
      &:hover > .console-filter-popup-list-cell-h-box > .console-filter-popup-list-cell-remove-button > .cross {
        -fx-background-color: -df-component-lighter;
      }
      &-remove-button {
        -fx-padding: 4px;
        -fx-background-color: transparent;
        & > .cross {
          -fx-min-width: 10px;
          -fx-max-width: 10px;
          -fx-min-height: 10px;
          -fx-max-height: 10px;
          -fx-shape: "M 2 0 L 5 3 L 8 0 L 10 2 L 7 5 L 10 8 L 8 10 L 5 7 L 2 10 L 0 8 L 3 5 L 0 2 Z";
          -fx-background-color: transparent;
        }
        &:hover > .cross {
          -fx-background-color: -df-text !important;
        }
      }
    }
    &-view {
      & .scroll-bar:horizontal .increment-arrow, .scroll-bar:horizontal .decrement-arrow, .scroll-bar:horizontal .increment-button, .scroll-bar:horizontal .decrement-button {
        -fx-padding: 0;
      }
    }
  }
  &-text-field {
    -fx-padding: 20px;
  }
}

#search-console {
  -fx-max-height: 26px;
  -fx-border-radius: 2px;
}

#prev-console-separator,
#search-console-separator {
  @extend .console-space-separator;
  -fx-min-width: 16px;
}

#next-console-separator,
#toggle-console-filtering-separator {
  @extend .console-space-separator;
  -fx-min-width: 4px;
}

#clear-console-separator {
  @extend .console-space-separator;
  -fx-min-width: 12px;
}

#debugger-separator {
  -fx-background-color: transparent;
  -fx-padding: 0px 12px 0px 20px;

  .line {
    -fx-border-color: -df-background-light;
  }
}

#debugger-tool-bar {
  -fx-spacing: 8px;
}

#step-over-separator {
  @extend .console-space-separator;
  -fx-min-width: 8px;
}

#toggle-console-filtering {
  @extend .console-image-button-base;
}

#prev-console {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_59-Arrow-Left.png");
}

#next-console {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_60-Arrow-Right.png");
}

#clear-console {
  @extend .console-button-base;
  -fx-min-width: 49px;
}

#pause-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_56-Pause.png");
}

#play-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_57-Play.png");
}

#stop-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_58-Stop.png");
}

#step-over-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_53-Step-Over.png");
}

#step-in-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_55-Step-In.png");
}

#step-out-debugger-button {
  @extend .console-image-button-base;
  -fx-background-image: url("icons/32/Icons_54-Step-Out.png");
}

#debugger-prompt-label {
  -fx-alignment: center-right;
  -fx-background-color: -df-background-light;
  -fx-border-color: -df-background-lighter;
  -fx-border-width: 1px 0px 0px 0px;
  -fx-font-family: $default-font-mono;
  -fx-font-size: 90%;
  -fx-min-width: 42px;
  -fx-max-width: 42px;
  -fx-max-height: 100px;
  -fx-padding: 0px 9px 0px 0px;
}

#debugger-prompt-field {
  -fx-background-color: -df-background-light;
  -fx-border-color: -df-background-lighter;
  -fx-border-width: 1px 0px 0px 0px;
  -fx-font-family: $default-font-mono;
  -fx-font-size: 90%;
  -fx-font-smoothing-type: lcd;
  -fx-min-height: 44px;
  -fx-padding: 0px;
  -fx-text-fill: -df-text;

  &:focused {
    -fx-background-color: -df-background-light;
    -fx-border-color: -df-background-lighter;
    -fx-border-width: 1px 0px 0px 0px;
    -fx-padding: 0px;
    -fx-text-fill: -df-text;
    -fx-prompt-text-fill: transparent;
  }
}

.console-filter-popup-separator {
  -fx-padding: 2 0;
  -fx-background-color: transparent;
  > .line {
    -fx-background-color: rgba(255, 255, 255, 0.1);
    -fx-border-color: transparent;
    -fx-border-width: 1 0 0;
  }
}
