@import "_global-variables.scss";
@import "../../../lib/ct-card.scss";

.vm-details .pf-c-card {
    @extend .ct-card;
}

.consoles-card h2 button {
    font-size: var(--pf-global--FontSize--2xl);
    padding: 0;
    > .pf-c-button__icon {
        font-size: var(--pf-c-button--FontSize)
    }
}

.vm-top-panel {
  display: flex;

  .vm-name {
    font-weight: var(--pf-global--FontWeight--light);
    margin-right: 1.5rem;
  }

  &,
  .btn-group {
    align-items: center;
  }
}

.pf-l-gallery.ct-vm-overview {
  $ctVmBreakpoint: 1000px;

  @media screen and (max-width: $ctVmBreakpoint) {
    --pf-l-gallery--GridTemplateColumns: 1fr;
  }

  @media screen and (min-width: $ctVmBreakpoint + 1) {
    --pf-l-gallery--GridTemplateColumns: minmax(max-content, 20rem) 1fr;

    .consoles-card {
        grid-row: 1 / span 2;
        grid-column: 2 / -1;
    }

    .usage-card {
      grid-column-start: 1;
    }
  }

  .networks-card, .disks-card, .snapshots-card {
    grid-column: 1 / -1;
  }

  .pf-c-card {
    &__header {
      font-size: var(--pf-global--FontSize--xl);
    }

    &__footer {
      &:empty {
        display: none;
      }
    }
  }

  .pf-c-progress {
    --pf-c-progress--GridGap: var(--pf-global--spacer--xs);
  }
}
