@import "variables.less";

:root {
  --cards-hybrid-gutter-y: 1.5rem;
  --cards-hybrid-gutter-x: 2rem;
  --cards-hybrid-min: 22rem;
}

@media (max-width: 768px) {
  :root {
    --cards-hybrid-gutter-y: 1rem;
    --cards-hybrid-gutter-x: 1rem;
  }
}
@media (max-width: 480px) {
  :root {
    --cards-hybrid-min: 15rem;
  }
}

/* Organize cards in a grid instead of BootStrap */
.grid-cards-ct {
  display: grid;
  grid-gap: var(--cards-hybrid-gutter-y) var(--cards-hybrid-gutter-x);
  grid-template-columns: repeat(auto-fit, minmax(var(--cards-hybrid-min), 1fr));
  padding: var(--cards-hybrid-gutter-y) var(--cards-hybrid-gutter-x);

  > div {
    /* No funky negative margins are needed for grid */
    margin: 0;
  }
}

@media screen and (min-width: 60rem) {
  /* Make a single card no longer than half the width */
  .grid-cards-ct > div:first-child:last-child {
    /* Remove 1/2 grid-gap to keep width the same */
    max-width: calc(50% - 10px);
  }
}

/* PatternFly overrides for hybrid style */
.cards-ct-hybrid {
  .card-pf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    max-width: calc(100vw - var(--cards-hybrid-gutter-x));
  }

  .card-pf-title,
  .card-pf-body {
    margin: 0;
  }

  .card-pf-title,
  .card-pf-title a {
    display: flex;
    align-items: center;
  }

  .card-pf-title {
    flex: auto;
    padding: 1rem 0 1rem 1rem;
    font-size: var(--pf-global--FontSize--md);

    a {
      color: @color-pf-blue-400 !important;
      margin: -20px;
      padding: 20px;

      &:hover {
        text-decoration: none;

        .card-pf-title-link {
          text-decoration: underline;
        }
      }
    }

    .pficon,
    .fa {
      margin-right: 1rem
    }
  }

  .card-pf-body {
    flex: 0 auto;
    padding: 10px 20px;
  }

  .card-pf-aggregate-status-count {
    color: inherit;
    padding: 0 .5rem 0;
    font-size: var(--pf-global--FontSize--xl);
    font-weight: 600;
  }

  .card-pf-aggregate-status-notifications {
    font-size: var(--pf-global--FontSize--md);
    font-weight: 600;
    margin: 0;

    .pficon,
    .fa {
      font-size: 1.25em;
      margin-right: 0.5rem;
      position: relative;
      /* Shove down from the top the (.25em difference) / 2 */
      top: 0.125em;
      vertical-align: top;
    }
  }

  .card-pf-aggregate-status-notification + .card-pf-aggregate-status-notification {
    margin-left: 1rem;
    padding-left: 1rem;
  }
}