/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/style/typography";

.quantity-formatting-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: $buic-background-dialog;

  *, *:before, *:after {
    box-sizing: inherit;
  }

  .quantity-unit-system-selector-container {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;

    >span.uicore-label {
      font-size: 18px;
     }
     >select.uicore-inputs-select {
       width: fit-content;
       min-width: 185px;
       margin-top: 10px;
       height: 2em;
     }
  }

  .uifw-quantity-format-section-label {
    font-size: 18px;
    margin-left: 20px;
  }

  .uifw-quantity-types-container {
    display: flex;
    height: 100%;
    width: auto;

    > .left-panel {
      flex-direction: column;
      min-width: 260px;
      width: auto;
      padding: 10px 50px 20px 20px;
      height: auto;

      ul.core-listbox.uifw-quantity-types {
        height: 100%;
        li.core-listbox-item {
          line-height: 2em;
        }
      }
    }

    > .right-panel {
      display: flex;
      flex-direction: column;
      width: auto;
      height: auto;
      min-width: 410px;
      padding: 10px 20px 20px 0;

      .uifw-quantity-types-right-top {
        display: flex;
        padding-bottom: 10px;

        .uifw-quantity-types-right-top-sample {
          display: grid;
          grid-template-columns: auto 1fr;
          row-gap: 0;
          column-gap: 6px;
          align-items: center;
          .components-quantity-persistence-input {
            width: 6.5em;
          }
          span.components-quantity-formatted-sample {
            margin-left: 10px;
          }
          >span.components-inline {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
            margin-right: 10px;
          }
        }
      }

      .uifw-quantity-types-formats {
        display: flex;
        flex-direction: column;
        border: 1px solid $buic-inputs-border;
        border-radius: 3px;
        height: auto;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 6px;
        flex: 1 1 auto;
      }

      .components-button-panel {
        padding-top: 6px;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
      }
    }
  }
}