// Copyright (c) 2014, 2026, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!
// WARNING: do not directly import this file, instead import the
//          version in your theme's directory,
//          for example alta/widgets/_oj.alta.dvt.nbox.scss
// !!!
@import "../../utilities/oj.utilities";

@if $includeNBoxClasses != false {
  @include module-include-once("common.nbox") {

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-n-box:not(.oj-complete) {
        visibility: hidden;
      }
    }

    oj-n-box {
      display: block;
    }

    .oj-nbox {
      // hide any selection effects on the actual component


        @include oj-user-select-property(none);

      width:100%;
      height:540px;
    }

    .oj-nbox-container {
      grid-gap: 3px;
    }

    .oj-nbox-columns-title,
    .oj-nbox-rows-title {

        color: $textColor;
        font-size: $fontSize;

    }

    .oj-nbox-column-label,
    .oj-nbox-row-label {

        color: $textColor;
        font-size: $smallFontSize;

    }

    .oj-nbox-cell {

        background-color: $dvtNBoxCellBgColor;
        padding: 6px;
        grid-gap: 6px;
        height: 34px;


    }

    .oj-nbox-cell.oj-maximized {

        background-color: $dvtNBoxCellBgColorMaximized;

    }

    // Cells are shown in minimized state when any other node is maximized
    .oj-nbox-cell.oj-minimized {

        background-color: $dvtNBoxCellBgColorMinimized;

    }

    .oj-nbox-cell-label {

        color: $textColor;
        font-size: $fontSize;
        font-weight: $header4FontWeight;

    }

    .oj-nbox-node-one-label-padding {
      padding: 2px;
      
    }

    .oj-nbox-node-two-label-padding {
      padding: 2px;
      
    }

    .oj-nbox-node-no-label {
      height: 19px;
    }



    // Cell node count in the body of the cell.  Shown when nbox is too
    // small to show all of the nodes.
    .oj-nbox-cell-countlabel {

        color: $textColor;

    }

    // Cell node count in the header of the cell.  Shown when specified
    // in the nbox options.
    .oj-nbox-cell-countlabel.oj-nbox-cell-header {

        font-size: $fontSize;

    }

    .oj-nbox-node {

        background-color: $dvtComponentBgColor;
        border-radius: 1px;
        min-width: 55px;
        max-width: 148px;

    }

    .oj-nbox-node.oj-hover {

      border-color: $dvtBorder2Color;

    }

    .oj-nbox-node.oj-selected {

      border-color: $dvtBorderColor;

    }

    .oj-nbox-node-label {

      font-size: $fontSize;

    }

    //Size of the background image file
    .oj-nbox-node-initials-background {
      width: $avatarXxlInnerSize;
      height: $avatarXxlInnerSize;
    }

    .oj-nbox-node-secondarylabel {

      font-size: $smallFontSize;

    }

    // Group node label
    .oj-nbox-node-categorylabel {
    }

    // Dialog is shown when inspecting a group node
    .oj-nbox-dialog {

      background-color: $dvtNBoxCellBgColor;
      border-color: $dvtNBoxDialogBorderColor;

    }

    .oj-nbox-dialog-label {

        color: $textColor;
        font-size: $fontSize;
        font-weight: $header4FontWeight;

    }

    // Dialog node count in the header of the dialog.  Shown by default.
    .oj-nbox-dialog-countlabel {

        font-size: $fontSize;
        font-weight: $header4FontWeight;
      
    }
    .oj-nbox-node-initials {
      fill: $neutralColor1;
      font-size: $avatarXxsInitialsFontSize;
    }

    .oj-nbox-node-initials.oj-nbox-node-initials-lg {
      font-size: $avatarXsInitialsFontSize;

    }

    .oj-nbox-node-initials-neutral {
      fill: $neutralColor13;
    }

    .oj-nbox-node-initials-red {
      fill: $avatarRed;
    }

    .oj-nbox-node-initials-orange {
      fill: $avatarOrange;
    }

    .oj-nbox-node-initials-forest {
      fill: $avatarForest;
    }

    .oj-nbox-node-initials-green {
      fill: $avatarGreen;
    }

    .oj-nbox-node-initials-teal {
      fill: $avatarTeal;
    }

    .oj-nbox-node-initials-mauve {
      fill: $avatarMauve;
    }

    .oj-nbox-node-initials-pink {
      fill: $avatarPink;
    }

    .oj-nbox-node-initials-purple {
      fill: $avatarPurple;
    }

    .oj-nbox-node-initials-blue {
      fill: $avatarBlue;
    }

    .oj-nbox-node-initials-slate {
      fill: $avatarSlate;
    }

    .oj-nbox-node-initials-lilac {
      fill: $avatarLilac;
    }

    .oj-nbox-node-initials-gray {
      fill: $avatarGray;
    }
  }
}