/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
.xh-alert-banner-panel {
  &__form-panel {
    min-width: 450px;
    max-width: 450px;
    border-right: var(--xh-border-solid);

    &__fields {
      padding: var(--xh-pad-px) var(--xh-pad-px) var(--xh-pad-double-px);
      overflow-y: auto;

      &--ro {
        color: var(--xh-text-color-muted);
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }

    .xh-toolbar {
      background-color: transparent;
    }
  }

  &__intro {
    padding: var(--xh-pad-px);
    border-bottom: var(--xh-border-solid);
  }

  &__disabled-warning {
    background-color: var(--xh-intent-warning);
    color: white;
    padding: var(--xh-pad-px);

    p:first-child {
      font-weight: 600;
    }
  }

  &__preview-panel {
    flex: 1;

    .xh-panel__inner {
      background: none;
    }

    .xh-vframe {
      padding: var(--xh-pad-double-px);
    }

    .xh-placeholder {
      background-color: var(--xh-intent-primary-l1);
    }
  }

  &__menu-item {
    width: 360px;
    min-width: 0;

    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  &__client-app-cell-container {
    display: flex;
    list-style-type: none;
    padding: 0;
    max-width: 400px;
    flex-wrap: wrap;
    row-gap: 4px;

    li {
      padding: 2px 4px;
      margin: 0 2px;
      border-radius: var(--xh-border-radius-px);
      background-color: var(--xh-intent-neutral);
      font-size: var(--xh-font-size-small-em);
    }
  }

  .xh-button--intent-primary.xh-button--active:not(:hover) {
    background-color: var(--xh-intent-primary) !important;
  }

  .xh-button--intent-success.xh-button--active:not(:hover) {
    background-color: var(--xh-intent-success) !important;
  }

  .xh-button--intent-warning.xh-button--active:not(:hover) {
    background-color: var(--xh-intent-warning) !important;
  }

  .xh-button--intent-danger.xh-button--active:not(:hover) {
    background-color: var(--xh-intent-danger) !important;
  }
}