/* Style sheet used by Java FX representations
 */

/* LEDRepresentation */
.led
{
    -fx-stroke-width: 2.345;
    -fx-stroke-type: inside;
    /* LEDRepresentation overrides this, but BoolButton still uses this stroke color */
    -fx-stroke: rgba(50, 50, 50, 0.7);
}
.led_label
{
    /* Move left to start on top of the border */
    -fx-label-padding: -2 -2 -2 -2; 
    /* Clip, don't add "...", to see most of text that doesn't fit the LED */
    -fx-text-overrun: clip;
}

/* AutocompleteMenu: menu items */
.ac-menu-item
{
}

/* result provider labels (e.g. "History") 
 * Is ':disabled', but setting opacity
 * to still show with full color.
 */
.ac-menu-label
{
    -fx-font-weight:bold;
    -fx-opacity: 1.0;
}

/* Default button padding in modena.css:
 * .button
 * {
 *  -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; (top right bottom left)
 * }
 * Compared to BOY, this reduces many button "labels" to "lab...".
 * Since button labels are centered anyway,
 * setting the left and right padding to near 0em makes no visual
 * difference for shorter labels, while at the same time allowing
 * for labels that are as wide as the button.
 * Removing the top/bottom padding helps with drop-down buttons,
 * while again no impact on "small" text because it's centered anyway.
 * Enabling wrap since that's what BOY did with larger labels,
 * using clip instead of "..." to see more of the text.
 */
.action_button
{
    -fx-padding: 0em 0.1em 0em 0.1em;
    -fx-wrap-text: true;
    -fx-text-overrun: clip;
    -fx-text-alignment: center;
}

/* Same for the menu button,
 * which uses a label inside the button
 */
.action_button > .label
{
    -fx-padding: 0em 0em 0em 0.2em;
    -fx-wrap-text: true;
    -fx-text-overrun: clip;
}

/** Used by MenuButton (Action Button Widget)
 *  to hide the 'down' arrow when button is too narrow
 */
.hide_arrow > .arrow-button,  .hide_arrow > .arrow-button > .arrow
{
    -fx-padding: 0;
}


/** Allow more room for text in combo box */
.combo-box > .list-cell
{
    -fx-padding: 0em 0em 0em 0.2em;
    -fx-wrap-text: true;
    -fx-text-overrun: clip;
}

/** Embedded display uses a ScrollPane.
 *  That pane has a 'background' which only appears as a small rim.
 *  The bulk is handled by a 'viewport' inside the skin,
 *  which is hard to access since lookup(".viewport") only works
 *  after the widgets have been rendered.
 *
 *  -> Make the embedded display scroll pane
 *     transparent and handle all coloring
 *     via the 'inner' pane in the code.
 */
.embedded_display
{
    /* Hide small border around scroll pane, see
     * http://stackoverflow.com/questions/17540137/javafx-scrollpane-border-and-background/17540428#17540428
     */
    -fx-background-color: transparent;
}
.embedded_display > .viewport
{
    -fx-background-color: transparent;
}

/* NavigationTabs:
 * tabregion with buttons; horizontal or vertical(default).
 * body contains the embedded widgets.
 */
 
.navtab_tabregion
{
    -fx-background-color: transparent;
}
 
.navtab_button
{
    -fx-padding: 0em 0em 0em 0em;
    /* 'vertical': Attach to body on right, rounded corners on left
     * The right-inset=3/4/5 leaves a gap between the inactive tab and the body
     */
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 3 0 0, 2 4 1 1, 3 5 2 2;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
}

.navtab_button:selected
{
    /* The right-inset=-1 so that it reaches into the body */
    -fx-background-insets: 1 -1 0 0, 2 -1 1 1, 3 -1 2 2;
}

.navtab_button:horizontal
{
    /* 'horizontal': Attach to body on bottom, rounded corners on top
     * The bottom-inset=3/4/5 leaves a gap between the inactive tab and the body
     */
    -fx-background-insets: 0 1 3 0, 1 2 4 1, 2 3 5 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
}

.navtab_button:horizontal:selected
{
    /* The bottom-inset=-1 so that it reaches into the body */
    -fx-background-insets: 0 1 -1 0, 1 2 -1 1, 2 3 -1 2;
}

.navtab_scroll
{
    /* Color of the scroll pane's border */
    -fx-background-color: transparent;
}

.navtab_scroll > .viewport
{
    /* Color of the scroll pane's content */
    -fx-background-color: transparent;
}

.navtab_body
{   
    -fx-border-color: -fx-outer-border;
    -fx-border-radius: 2;
    -fx-border-width: 1;
    -fx-padding: 4;
}

/** Default text-input padding in modena.css:
 * .text-input
 *  -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; (top right bottom left)
 * .text-area .content
 *  -fx-padding: 0.25em 0.583em 0.25em 0.583em;
 *  Similar to .button, this reduces the visible text compared to BOY displays.
 *  It's still a pleasant padding for text fields
 *  in the property pane etc.,
 *  to only changing padding in custom .text_entry,
 *  not the underlying .text-input and .text-area 
 */
.text_entry
{
   -fx-padding: 0em 0em 0em 0em;
}
.text_entry .content
{
   -fx-padding: 0em 0em 0em 0em;
}

/** Used for TextUpdate as well as Label
 *  (can't use ".label", wanted to avoid
 *   yet another class)
 */
.text_update
{
   -fx-text-overrun: clip;
}

/* Default button padding in modena.css is white-on-black */
.tooltip
{
    -fx-background: rgba(231,243,253);
    -fx-text-fill: black;
    -fx-background-color: rgba(231,243,253,0.8);
    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.3em 0.35em 0.3em 0.35em;
    -fx-font-size: 10pt;
}

/* Original split pane divider is too thick. */
.split-pane > .split-pane-divider
{
    -fx-padding: 0 0.095em 0 0.095em;
    -fx-color: derive(-fx-base,-11.11%);
}

/*
 * ToggleSwitch
 */
.root
{
    -db-toggle-switch-off: #f5f5f5;
    -db-toggle-switch-on: #0b99c9;
    -db-transparent-text-box-border: rgba(236, 236, 236, 0.50);
}
.toggle-switch .thumb-area
{
    -fx-background-radius: 1em;
    -fx-background-color: linear-gradient(
            to bottom,
            derive(-db-transparent-text-box-border, -20%),
            derive(-db-transparent-text-box-border, -30%)
        ),
        -db-toggle-switch-off;
    -fx-background-insets: 0, 1;
}

.toggle-switch:selected .thumb-area
{
    -fx-background-color: linear-gradient(
            to bottom,
            derive(-db-transparent-text-box-border, -20%),
            derive(-db-transparent-text-box-border, -30%)
        ),
        linear-gradient(
            to bottom,
            derive(-db-toggle-switch-on, 30%),
            -db-toggle-switch-on
        );
    -fx-background-insets: 0, 1;
}
.toggle-switch .thumb-area
{
    -fx-padding: 0.75em 1.416661em 0.75em 1.416661em; /* 7 17 7 17 */
}

/* Progress bar option for small widget to still show the bar.
 * In modena.css, the .track nests a highlight, border and shaded background.
 * The .bar insets are 3 3 4 3 for the default, horizontal orientation,
 * i.e. 3 pixel inset around with 4 on bottom, so bar size = widget_height - 3 - 4.
 * 'Small' version keeps only the track's shaded background,
 * and the bar has no insets to use the full widget height.
 */
.SmallBar.progress-bar .bar
{
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

.SmallBar.progress-bar .track
{
    -fx-background-color: linear-gradient(to bottom,
                                          derive(-fx-control-inner-background, -7%),
                                          derive(-fx-control-inner-background, 0%),
                                          derive(-fx-control-inner-background, -3%),
                                          derive(-fx-control-inner-background, -9%));
    -fx-background-insets: 0;
    -fx-background-radius: 2;
}

/*
Next are three pseudo classes that can be used to align text in a TextArea,
see for instance TextEntryRepresentation.
*/
.text-area:center .text{
 -fx-text-alignment: center;
}

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

.text-area:left .text{
 -fx-text-alignment: left;
}

