@import "root.css";

/**************************************************
 * Window Header
**************************************************/
#windowHeader {
  .icon-button {
    -fx-icon-code: fa-circle;
    -fx-opacity: 0.5;

    &:hover {
      -fx-opacity: 1.0;
    }
  }

  #closeIcon {
    -fx-icon-color: -color-chart-1;
  }

  #minimizeIcon {
    -fx-icon-color: -color-chart-2;
  }

  #alwaysOnTopIcon {
    -fx-icon-color: -color-chart-3;

    &:always-on-top {
      -fx-opacity: 1.0;
    }
  }
}


/**************************************************
 * Tab label
**************************************************/
#tabPane {
  -fx-background-color: transparent;

  .tab-header-area {
    -fx-background-color: transparent;

    .tab-header-background {
      -fx-background-color: transparent;
    }

    .headers-region {
      //-fx-background-color: #f9f9fb;
      -fx-background-color: -color-neutral-muted;
      -fx-background-radius: 10;

      .tab {
        -fx-padding: 5;
        -fx-background-color: transparent;

        .tab-container {
          -fx-background-color: transparent;
          -fx-border-width: 0;

          .tab-label {
            -fx-pref-width: 80;
            -fx-padding: 10 0;
            -fx-background-radius: 10;
            -fx-text-alignment: CENTER;
            -fx-alignment: CENTER;
            -fx-font-size: 15px;
            -fx-border-width: 0;
          }
        }

        &:selected {

          .tab-label {
            -fx-background-color: -color-accent-5;
            -fx-text-fill: white;
          }

          .ikonli-font-icon {
            -fx-icon-color: white;
          }
        }
      }
    }
  }
}

/**************************************************
 * Window Footer
**************************************************/

#windowFooter {
  .button {
    -fx-font-size: 15;
    -fx-text-alignment: CENTER;
  }

  .ikonli-font-icon {
    -fx-font-size: 15;
  }
}

/**************************************************
 * Modal Pane
**************************************************/

.modal-pane {
  -fx-background-radius: 15;

  .scrollable-content {
    -fx-background-radius: 15;
  }
}