/*
 These styling overrides represent global changes to the primeng components.

 Styles should only be placed here only if there are no design tokens available for the particular css property needing to be changes.

 If individual components need primeng changes to nested components, using :host ::ng-deep would be appropriate.
 */
@layer primeng {
  * {
    box-sizing: border-box;
  }

  .p-dialog-mask {
    pointer-events: auto !important;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .field {
    margin-bottom: 0.3rem !important;
  }

  .p-toast.p-toast-top-right,
  .p-toast.p-toast-top-left,
  .p-toast.p-toast-top-center {
    top: 60px !important;
  }

  .p-toast-message-error {
    button.p-toast-close-button {
      color: var(--color-red-800) !important;
    }
  }

  .p-toast-message-info {
    button.p-toast-close-button {
      color: var(--color-blue-800) !important;
    }
  }

  .p-toast-message-warn {
    button.p-toast-close-button {
      color: var(--color-amber-800) !important;
    }
  }

  .p-toast-message-success {
    button.p-toast-close-button:hover {
      background-color: var(--p-primary-600) !important;
      color: var(--p-primary-100) !important;
    }
  }

  .p-select-async {
    .p-select-list-container {
      min-height: 162px !important;
      .p-virtualscroller {
        /* set the virtual scroller min size, otherwise it opens with a height of 3px. */
        min-height: 162px !important;
      }
    }
  }

  .p-select-option {
    &:hover {
      background-color: var(--color-slate-200) !important;
    }
  }

  .p-dialog-header {
    background-color: var(--color-white);
    border-top-left-radius: var(--p-border-radius-md);
    border-top-right-radius: var(--p-border-radius-md);
  }

  .p-dialog-content {
    border-bottom-left-radius: var(--p-border-radius-md);
    border-bottom-right-radius: var(--p-border-radius-md);
  }

  .p-dialog-footer {
    background-color: var(--color-white);
    border-radius: var(--p-border-radius-md);
  }

  .p-confirmdialog {
    background-color: var(--color-white) !important;
  }

  /* p-button.selected is not a standard primeng style, custom style for a 'selected' state for a button */
  p-button.selected > .p-button.p-button-secondary {
    background-color: var(--color-neutral-100) !important;
    &:hover {
      background-color: var(--color-slate-200) !important;
    }
  }

  .p-tieredmenu-item.active {
    background-color: var(--color-neutral-100);
  }

  .p-tablist-tab-list .p-tab:not(.p-tab-active):hover {
    font-weight: bold;
  }

  .p-tablist-tab-list .p-tab {
    border-radius: var(--p-border-radius-md) var(--p-border-radius-md) 0 0;
  }

  /*
    to support a p-tab to hover bold without increasing the size of the tab causing other tabs to move
    this adds an invisible block with the bolded content plus some padding to set the width
    NOTE: this also requires the p-tab template to have a span with a title attribute
   */
  .p-tablist-tab-list .p-tab span::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  /* additional padding for the hidden bold block for when the p-tab has an icon in it */
  .p-tablist-tab-list .p-tab i + span::after {
    padding: 0 0.7rem;
  }

  .p-tablist-tab-list .p-tab.p-tab-active {
    border-bottom: 2px solid var(--color-cyan-800);
    font-weight: bold;
  }

  a:-webkit-any-link {
    color: unset;
    cursor: pointer;
  }

  @media screen and (max-width: 960px) {
    .p-dialog:not(.p-dialog-maximized) {
      width: 100vw !important;
    }
  }

  /*
  This background override is designed to fix a bug on the p-listbox control. If the p-listbox control loses
  focus, the background color of an item will not change when the item is currently selected and being hovered
  over by the mouse. The background color will display the selectedBackground color instead of the
  selectedFocusBackground color as expected. The bug can be reproduced currently in the listbox control
  when editing the workflow associated with a site.
   */
  .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected:hover {
    background: var(--color-slate-200);
  }
}