/*
 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-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;
    }
  }
}