/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2019. All Rights Reserved.
 *
 * Note to U.S. Government Users Restricted Rights:
 * Use, duplication or disclosure restricted by GSA ADP Schedule
 * Contract with IBM Corp.
 *******************************************************************************/
 /* Copyright (c) 2020 Red Hat, Inc.*/

@import 'node_modules/carbon-components/scss/globals/scss/styles';
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'node_modules/carbon-components/scss/globals/scss/_helper-mixins';
@import '../node_modules/@patternfly/react-core/dist/styles/base.css';
@import '../node_modules/@patternfly/patternfly/patternfly.css';
@import 'header-carbon-v9-migration';
@import 'variables';
@import '_red-hat-font';

@include redhat-font-face;

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  font-family: RedHatText;
  font-size: var(--pf-global--FontSize--sm);
}

.bx--link, .bx--label, .bx--search-input, .bx--overflow-menu-options__btn, 
.bx--pagination__text, .bx--text-input, .bx--tooltip, .bx--tooltip-shown,
.bx--tooltip--icon__top::before, .bx--tooltip--icon__top::after, 
.bx--tooltip--icon__bottom::before, .bx--tooltip--icon__bottom::after, 
.bx--tooltip__label, .bx--tag, .bx--pagination, .bx--select, .bx--label, 
.bx--select-input {
  font-family: RedHatText;
}

.pf-c-table tr > * {
  --pf-c-table--cell--FontSize: var(--pf-global--FontSize--sm);
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $acm-background-color;
  
  .bx--data-table-v2{
    thead{
      background-color: $acm-background-color;
    }
  }
  .bx--data-table-v2--zebra tbody tr:nth-child(2n) {
    background-color: $color__white;
  }
  .bx--tooltip--shown, .pf-c-tooltip__content {
    border-radius: 3px;
    font-size: .875rem;
  }
}

.page-content-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 5% 3.375rem;
  
  .bx--select--inline{
    svg.bx--select__arrow{
      position: absolute
    }
  }
}

.resource-list-filter {
  margin-top: -1.5rem;
  padding-bottom: 3rem;
}

.bx--loading-overlay {
  z-index: 10000; // need higher z-index with modals open
}

.expand-vertically {
  height: 100%;
  .patternfly-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
  }
  .side-panel-spinner {
    left: 75%;
  }
}

.nested-expandable-row {
  display: flex;
  flex-direction: column;
  .nested-expandable-row-header {
    font-weight: bold;
    color: $color__blue-50;
  }
  .nested-expandable-row-content {
    margin-top: -2rem;
  }
}

div.disable-tooltip {
  cursor: not-allowed;
}

div.no-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32.375rem;
  padding: 0 2.5rem;
  background-color: transparent;
  box-shadow: none;
  border: none;
  margin: 1.5rem auto;

  div {
    margin-left: auto;
    margin-right: auto;
  }

  .no-resource-icon {
    width: 19rem;
  }

  .no-resource-text-info {

    .no-resource-title {
      color: #162E3D;
      font-family: RedHatText;
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1rem;
      margin-top: 1.5rem;
      text-align: center;
    }
  
    .no-resource-detail {
      color: var(--pf-global--Color--100);
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.5rem;
      margin-bottom: 2rem;
      max-width: unset;
      text-align: center;

      .no-resource-detail__link {
        color: var(--pf-global--link--Color);
        font-size: 1rem;
        font-weight: bold;
      }
    }
  }

  .button-group {
    display: flex;
    flex-direction: column;

    div {
      margin-bottom: 0.875rem;
    }
  }
}

.bx--modal-content {
  .yamlEditorContainerContainer {
    height: calc(100vh - 500px);
    overflow: hidden;
    
    .yamlEditorContainer {
      height: 100%;
      
      & * {
        font-family: unset;
        font-size: var(--pf-global--FontSize--xs);
      }
    
      .codicon[class*='codicon-'] {
        font-family: codicon;
      }
    }
  }
}
