$catalog-item-icon-size-lg: 40px;
$catalog-item-icon-size-sm: 24px;
$co-modal-ignore-warning-icon-width: 30px;

// Until Patternfly-React-Extensions is updated: https://github.com/patternfly/patternfly-react/issues/1146
.catalog-tile-pf-title, .properties-side-panel-pf-property-value {
  @include co-break-word;
}

// reset font size back to 13px since console h5 font size is 14px
.catalog-item-header-pf-subtitle {
  font-size: 13px;
}

.catalog-tile-pf-body .catalog-tile-pf-subtitle {
  font-size: ($font-size-base - 1);
}

.co-catalog {
  background-color: $pf-color-black-200;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 515px; // in order to accommodate filters and tiles at mobile
  padding: 0 0 ($grid-gutter-width / 2);
}

.co-catalog-item-details {
  display: flex;
  margin: 0 0 10px;

  &__description {
    white-space: pre-wrap;
  }

  &__kind-label {
    font-weight: var(--pf-global--FontWeight--bold);
  }

  &__name {
    margin-bottom: 10px;
  }

  &__provider,
  &__tags {
    margin-bottom: 5px;
  }

  &__tag {
    color: $color-pf-black-600;
    font-size: ($font-size-base - 1);
    margin-right: 5px;
    text-transform: uppercase;
  }
}

.co-catalog-item-icon {
  padding-right: 10px;

  &__icon {
    font-size: $catalog-item-icon-size-sm;

    &--large {
      font-size: $catalog-item-icon-size-lg;
    }
  }

  &__img {
    max-height: $catalog-item-icon-size-sm;
    max-width: $catalog-item-icon-size-sm;

    &[src$=".svg"] {
      width: $catalog-item-icon-size-sm;
    }

    &--large {
      max-height: $catalog-item-icon-size-lg;
      max-width: $catalog-item-icon-size-lg;

      &[src$=".svg"] {
        width: $catalog-item-icon-size-lg;
      }
    }
  }
}

.co-catalog-page {
  background: $color-pf-white;
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(3,3,3,.2);
  display: flex;
  flex:1;
  margin: 0 ($grid-gutter-width / 2);
  padding: ($grid-gutter-width / 2) 0 0;

  &__content {
    flex: 1 1 auto;
  }

  &__description {
    margin-top: -10px;
    padding: 0 ($grid-gutter-width / 2) 10px;
    @media (min-width: $grid-float-breakpoint) {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }
  }

  &__filter {
    display: flex;
    justify-content: space-between;
  }

  &__filter-toggle {
    margin-top: 5px;
  }

  &__header {
    border-bottom: 1px solid $color-pf-black-200;
    margin: 0 ($grid-gutter-width / 2) $grid-gutter-width 0;
  }

  &__heading {
    font-size: 16px;
    margin: 0 0 20px;
  }

  &__input {
    margin: 0 0 20px;
    width: auto !important;
  }

  &__num-items {
    font-weight: var(--pf-global--FontWeight--bold);
    padding: 0 0 20px;
  }

  // Enable scrolling on the modal
  &__overlay {
    .modal-body .co-hint-block {
        margin-bottom: 10px;
    }

    .properties-side-panel-pf {
      flex: 0 0 auto;
    }
  }

  &__overlay-body {
    margin: 15px 0 0;
    @media(min-width: $screen-sm-min) {
      display: flex;
    }
  }

  &__overlay-create {
    margin-bottom: 20px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  &__overlay-description {
    margin: 20px 0 0;
    white-space: pre-wrap;
    // TODO: find fix for urls that don't wrap
    // fix below causes undesirable wrapping on non-urls
    // word-break: break-all;

    @media(min-width: $screen-sm-min) {
        flex: 1 1 auto;
        margin-left: 20px;
        margin-top: 0;
      }
  }

  &__tabs {
    flex: 0 0 220px;
    margin: 0 ($grid-gutter-width / 2) 0 0;
  }
}

.co-catalog-tab__empty {
  color: $color-pf-black-600;
}

.co-modal-ignore-warning {
  height: initial;

  &__checkbox.checkbox {
    margin-bottom: 0;
    padding-top: 15px;
  }
  &__content {
    display: flex;
  }
  &__icon {
    font-size: $co-modal-ignore-warning-icon-width;
    margin-right: 15px;
    // Avoid the dialog shifting when the icon loads.
    min-width: $co-modal-ignore-warning-icon-width;
  }
  &__link {
    display: block;
    margin: 10px 0;
  }
}

.properties-side-panel-pf-property-label {
  font-size: ($font-size-base - 1);
}

// set font size to 14px
.vertical-tabs-pf-tab > a {
  font-size: $font-size-base;
}
