//TODO: for some reason these are missing in our patternfly version
html .pagination-pf-pagesize.btn-group {
  display: flex;
  float: none;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 5px;
  width: auto;
}

// necessary because of !important table margin css from foreman
// https://github.com/theforeman/foreman/blob/develop/app/assets/stylesheets/base.scss#L242
.table+.table-view-pf-pagination {
  margin-top: -6px !important;
}

// don't use this class if you need a dropdown menu to extend outside the table cell
.neat-table-cells {

  td,
  th {
    overflow: auto;
    word-wrap: break-word;
  }
}

// needed because we have overflow set to auto for all td's and it affected the pf4 table
.katello-pf4-table {
  td {
    max-width: 200px;
    overflow: unset;
    word-wrap: break-word;
  }
}

// override foreman's .editable styles, that are conflicting with the patternfly ones
.pf-table-inline-edit {
  .editable {
    background: none;
  }
}

// Removes inherited container padding on view
.container-fluid.container-pf-nav-pf-vertical.nav-pf-persistent-secondary {
  padding: 0;
}

// Margin shortcuts
.margin-24 {
  margin: 24px;
}

.margin-16 {
  margin: 16px;
}

.margin-8 {
  margin: 8px;
}

.margin-16-24 {
  margin: 16px 24px;
}

.margin-24-0 {
  margin: 24px 0;
}

.margin-16-0 {
  margin: 16px 0;
}

.margin-0-24 {
  margin: 0 24px;
}

.margin-right-16 {
  margin: 0 16px 0 0;
}

.gap-16 {
  grid-gap: 16px;
}

.margin-bottom-24 {
  margin-bottom: 24px;
}

.margin-top-24 {
  margin-top: 24px;
}

.margin-top-16 {
  margin-top: 16px;
}

.margin-top-8 {
  margin-top: 8px;
}

// needed to ensure correct spacing between buttons and the button
// container
.toolbar-pf .form-group {

  .btn,
  .btn-group,
  .btn-container,
  .tooltip-button-helper {

    +.btn,
    +.btn-group,
    +.btn-container,
    +.tooltip-button-helper {
      margin-left: 5px;
    }
  }
}

// Override browser default outline ring on focus
*:focus {
  outline: none;
}

// Modal sizing fix
.pf-l-bullseye .pf-c-modal-box {
  margin-top: 76px;
  max-height: calc(100vh - 76px);

  @media (min-width: 768px) {
    max-width: calc(100vw - 240px);
    margin-left: 200px;
  }
}

// Makes question tooltips have a hover state
.foreman-spaced-icon {
  margin: 0 8px;

  svg {
    color: var(--pf-global--Color--200)
  }

  svg:hover {
    color: var(--pf-global--Color--100)
  }
}

@keyframes hideme {

  0%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.tooltip {
  margin: auto;
  animation-direction: normal;
  animation-name: hideme;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.primary-detail-border {
  border-top: 0.2px;
  border-top-color: var(--pf-c-table--BorderColor);
  border-top-style: inset;
}

.primary-detail-stack-items-border {
  border-bottom: 0.2px;
  border-bottom-color: var(--pf-c-table--BorderColor);
  border-bottom-style: inset;
}

.border-left {
  border-left: 0.2px;
  border-left-color: var(--pf-c-table--BorderColor);
  border-left-style: inset;
}

.border-right {
  border-right: 0.2px;
  border-right-color: var(--pf-c-table--BorderColor);
  border-right-style: inset;
}