/*
 * Copyright (C) 2023 Red Hat, Inc.
 * SPDX-License-Identifier: LGPL-2.1-or-later
 */
@import "global-variables";
@import "../../../styles/cockpit-iframe-backdrop";

.cockpit-storage-integration-modal-page-section {
    width: 100%;
    height: 100%;

    .pf-v6-c-banner {
      /* Provide "breathing room" to make the banner more obvious */
      --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--md);
      --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--md);

      /* Create flex container to align the 'x' button */
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
}

.cockpit-storage-integration-page-section-cockpit-storage,
.cockpit-storage-integration-iframe-cockpit-storage {
  width: 100%;
}

.cockpit-storage-integration-page-section-storage-alert {
    padding-bottom: 0;
}

.cockpit-storage-integration-iframe-cockpit-storage {
    height: 100%;
    border-radius: var(--pf-t--global--border--radius--medium);
    border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
    background-clip: content-box; /* Fix weird anti-alaising */
}

.cockpit-storage-integration-page-section-cockpit-storage {
    display: grid;
    grid-template-columns: 3fr 1fr;
    flex: auto;
    gap: var(--pf-t--global--spacer--gutter--default);
    padding: var(--pf-t--global--spacer--gutter--default);
    background-color: var(--pf-t--global--background--color--action--plain--clicked);
}

.cockpit-storage-integration-sidebar {
    padding-left: 0;
}

.cockpit-storage-integration-page-section-storage-footer.pf-m-sticky-bottom {
    flex: none;
}

.cockpit-storage-integration-requirements-hint,
ul.cockpit-storage-integration-requirements-hint-list {
    font-size: smaller;
}

.cockpit-storage-integration-requirements-hint-detail {
    font-size: small;
}

// Hide the [x] button in the loading mode
.cockpit-storage-integration-check-storage-dialog--loading .pf-v6-c-modal-box__close {
    display: none;
}

// Make Spinner smaller - default EmptyStatePanel svg size is too big
.cockpit-storage-integration-check-storage-dialog--loading svg.pf-v6-c-spinner {
    --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
}

.cockpit-storage-integration-check-storage-dialog {
    .pf-v6-c-helper-text__item-text {
        color: unset;
    }
}